Written by elevenlab employee

Google Fontsの使い方

Google Fontsは無料で利用できるGoogleが提供するWebフォントです。
長い間ベータ版でしたが2018年9月から正式にサポートされています。
Webフォントの仕組みとしてはサーバーからデータを読み込んでWeb上に表示させるというものです。
Webフォントを使うとサイトが重くなるというイメージがあるかもしれませんが、一つのサイトで数種類程度の利用であれば問題ないです。
Google Fontsを使ってワンランク上のサイトを目指しましょう。

Google Fontsの使い方

まずはこちらのページにアクセスしてください

Google Fonts
フォントがずらっと並んでいます。
この中から探しても、上の検索バーを使って探してもOKです。

使いたいフォントが見つかったら右上の+(プラス)ボタンをクリックします。
そうすると選んだフォントが右下に追加されていきます。

この、選んだフォントが追加された黒い「Family Selected」の部分を開いてみましょう。
開くとこのような設定画面になります。


最初に開くと「EMBED」になっています。「STANDARD」に記載されている<link href=”〜の部分をコピーして<head>〜</head>内のどこかに貼ります。
次に「Specify in CSS」のCSSもコピーしてCSSのfont familyとして貼り付けます。
このように2つのソースをコピペするだけです。

選んだフォントを簡単カスタマイズ

ここまでの手順で問題なく好きなフォントが表示されますが、簡単に少しカスタマイズすることもできます。
「CUSTOMIZE」タブを開きます。


「Open Sans Condensed」で、フォントの太さ等が変更できます。

ここで選んだ設定はEMBEDのCSSにも自動で反映されるので便利です。

「Languages」はサポートされている言語ですが、英語のフォントは日本語には対応していないのでデフォルトのままで大丈夫です。

日本語フォントの場合は「Japanese」にチェックを入れます。
ちなみにフォントは下向き矢印をクリックすることでダウンロードして使うこともできます。

この記事を書いた人