Web制作 フォント

Google Fontsの使い方

色々なフォントを使ってみたいけどいいサイトない?

今回はそんな疑問にお答えします。

ちょっと個性的だったりカッコいいフォントを使ってみたいという方におすすめなのがGoogle Fontsです。

今回はこの Google Fonts の使い方について解説していきたいと思います。

Google Fontsとは

Google Fontsは無料使えるWebフォントサービスで、商用利用も無料で利用可能となっています。

しかもフォントの種類は989種類もあります(2020年5月現在)

 

通常のフォントとの違い

通常のフォントは閲覧する端末にインストールされてるフォントしか表示できないので、端末によってバラつきが発生します。

しかしGoogle FontsはWebフォントなので、端末の種類に関係なく共通のフォントを表示させることが出来ます。

なぜWebフォントは端末の種類に依存されないのかというと、端末にインストールされているフォントではなくサーバーから読み込む為です。

 

Google Fontsの使い方

まずは以下のページにアクセスします。

Google Fonts

するとこのような画面が表示されます。

 

 

現在989種類のフォントがあるのが確認出来ます。

それでは何か適当なフォントを選んで使ってみたいと思います。

下にスクロールしていけばどんどん表示されていきます。

今回は「indie Flower」というフォントを使ってみます。

 

 

上の画像の赤枠内をクリックすると次の画像が表示されます。

 

 

そしたら Select this style をクリックします。

すると次の画像が表示されます。

 

 

Select this style が Remove this styleになって右上に赤丸が付けばOKです。

このフォントは1種類しかありませんが、次の画像のようにフォントによっては太さが数種類あったり斜めのフォントがあったりします(3つ上の画像の赤枠内右上に書いてある数字が種類の数です)

 

 

そして先ほどの赤丸をクリックすると右側にコードを取得するための画面が表示されます。

 

 

下のダウンロードでフォントをダウンロードも出来ますが、今回は右上のEmbedからコードを取得します。

ちなみに真ん中のマイナスボタンをクリックすると、登録したフォントを削除します。

登録しているフォントが1つもないと少しイラッとする顔文字が現れますが気にしないようにしましょう。

 

 

そしてEmbedをクリックすると次の画面が表示されます。

 

 

<link> と @import の2種類ありますが、<link>の方のコードをコピーしてHTMLのheadタグ内に貼り付けます。

あとは下の方の font-family をコピーして、CSSで反映させたいフォントに貼り付ければOKです。

それでは反映されたか確認してみましょう。

まずはGoogle Fonts使用前。

 

そしてGoogle Fonts使用後。

フォントが変わったのが分かると思いますが、変わったのは英語の部分だけです。

なぜなら使用したフォントは英語フォントだからです。

Google Fontsにも日本語フォントはありますが、989種類中8種類しかありません(2020年5月現在)

 

 

 

せっかくなので日本語も使ってみたいと思います。

使い方は同じです。

 

ちなみに先ほどheadタグ内に貼り付けるコードと、font-familyのコードをコピペしましたが、今回のように2種類以上使いたい場合はどうなるでしょうか?

画面で見るとこうなります。

 

 

font-familyは単純に増えただけですね。

これを1行にするとこうなります。

font-family: "Indie Flower", cursive, "M PLUS 1p", sans-serif;

 

そしてheadタグ内に貼り付けるコードの方は1行のままですが、中身が増えています。

1種類の時と比べてみます。

<!-- フォント1種類 -->
<link href="https://fonts.googleapis.com/css2? family=Indie+Flower&display=swap" rel="stylesheet"/>

<!-- フォント2種類 -->
<link href="https://fonts.googleapis.com/css2? family=Indie+Flower&family=M+PLUS+1p:wght@100&display=swap" rel="stylesheet"/>

フォントが増えているのが分かると思います。

こうやって複数のフォントを同時に使用することも可能です(1つのサイトで多くの種類を使用するのはおすすめしませんが)

以上です。

-Web制作, フォント