なんか適当にあげるチャンネルのブログ
第一話、YTSansをGoogleのサーバーから取ってくる方法
開設初のブログは、YTSansをダウンロードする方法をお伝えします。
まず、フォントを取るには、フォントが記載されたところが必要です。
そのフォントが記載された場所とは、うぷ主がたまに覗く、YouTube Audio Library の曲名の場所にYTSansが使われています。
では、その YouTube Audio Library に行ってみましょう！！
まずは、YouTube Studio にアクセスし、
左のメニューから、オーディオライブラリを選択します。
そして、適当な曲を流し、続いて、開発者ツールでフォントを特定していきます。
F12または、右上のから、その他のツール、デベロッパーツール、を押して、デベロッパーツール(以下、開発者ツール)を起動させます。
そして、画面上にあるアイテムを選択するため、ピッカー？を起動させます。
起動のさせ方は、下記画像をご覧ください。
ピッカーが青くなれば、起動成功です。
起動すれば、曲名、フォントになっているところを選択します。
すると、2番目「Font」の項目に、"YTSans"が指定されていることから、このフォントの名前は、YTSansなんだとわかります。
フォント名はまた後で使いますので、忘れないようにしてくださいね。
では、ようやくフォントファイルの特定にかかっていきます。
予備知識ですが、CSSでWebフォントをファイルを宣言するのには、
こう指定しますので、読み込んでいるCSSの中にこのような文章が書かれているわけで、
src: url(font.woff2);
の下線で示した、font.woff2というものがフォントファイルとなります。
つまり、@font-faceだけ見つけてしまえば、後はダウンロードして終わりなので、これからは、@font-faceを探していきます。
いちいち探していると超めんどいので、検索を使います。
この検索は、読み込んであるCSSやJSも検索するので超優秀です。
では、Searchを起動させてみましょう。
開発者ツールの右上にあるから、Searchを選び、検索を起動。
検索が起動しますが、最初は画像みたいになっていると思うので、境目にマウスを当て、伸ばしてください。
引き延ばせたら、こうなります。
では、検索窓に「@font」と入力し、Enterを押し、検索します。
すると、いっぱい候補が見つかりますが、一番下の、YT Sans、なるものをクリック（やっと使いました。）
すると、上の今までHTMLソースだったところが、プレビューに変わります。
そして、プレビュー上で右クリック、Open in new tab をクリックします。
すると、新しくCSSのタブができ、移動します。
そうすると、ようやく念願の@font-faceが取得できました。
しかし、ここで安心して、一番上からダウンロードすると、いけません。
見てみると、おなじウェイト、スタイルのフォントが二つありますね。
なので(?)、下のほうからダウンロードします。
この場合、Normalの下のほうからダウンロードします。
↑選択して、https//...へ移動をクリックすると、ダウンロードウィンドウが現れますので、保存をクリックします。
よし、これで終わり！！でもいいのですが、それ、パソコンで使うんじゃないんですか...?
試しにダウンロードしたwoff2を、ダブルクリックしても開けないですよね。
パソコンで使うには、TTF、または、OTF、にしてあげる必要があります。
ということで、woff2 ttf Converter へアクセスします。
そして、ファイルを選択で先ほどダウンロードした、woff2を選択し、アップロードします。
そして、今すぐ変換、をクリックし、変換します。
すると、下にダウンロードリストが表示されますので、ダウンロードしたいファイルのダウンロードアイコンをクリックします。
別のページに飛びますが、ファイルリンクをクリックしてダウンロードします。
そして、お待ちかねのインストールです。
今ダウンロードしたttfを開いてみましょう。
すると、そこには確かに先ほど見たYTSansですね！！
さっそくインストーーーーる！！！
そして、今使っているソフトを再起動すると...
なんと、YTSansが使えているではありませんか...！！！！
みなさんもYTSansでよい生活を送りましょ～！！
ただし、配布物・商用利用はまだやめておきましょう。
多分Googleもダウンロードされると思ってないのでしょう。
以上。
しっかし大変ね。ブログ書くのも。
書いてる時間で8時から11時まで潰れちまったぞおいww
まあ、いいんですけどねww
これからも皆様のお役に立てるよう、ブログ・YouTubeも更新していきますので、よろしくお願いいたします。
この記事が良いと思ってくれたならば、共有をお願いいたします。
