WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

Google Fonts グーグルフォント の 使い方

Googleフォントの使い方

Web Fontはサーバー上のフォントを読み込みブラウザで表示するサービスです。
今まではユーザーのPC内にあるフォントしか表示することは出来なかった為、ユーザーの環境によって表示されるフォントが異なっていましたが、Web fontはサーバーからフォントを読み込むのでユーザーの環境に左右されないので制作者の意図したフォントを表示出来ます。

1.Google Fontsへアクセスしてフォントを選ぶ。

Google fontsへアクセス

まずはGoogle Fontsへアクセスしてください。

フォントを選ぶ

使いたいフォントセットをあれば、右矢印ボタンをクリックします。

フォントセットを選ぶ

次に太さ等を選ぶ

文字を見ながら読み込みたい太さ等を選んでチェックボックスにチェックを入れます。

太さを選ぶ

2.HTMLで取り込む

HTMLで取り込み

Google Fontsの[3. Add this code to your website:]のタグをコピーして<head>〜</head>間に読み込ませます。

HTMLで読み込む

CSSで指定

[4. Integrate the fonts into your CSS:]の部分をコピーしてCSSで使いたいセレクタに挿入していきます。

CSSを適用する

3.外部CSSを使って取り込む

importで取り込み

HTMLで取り込む場合と同様にタグをコピーするんですが、【http:】と【rel〜】の部分は無くてオッケーです。

CSSで指定

ここはCSSなのでとHTMLの場合と同様で使いたいセレクタに挿入するだけです。

CSSを適用する

4.まとめ

以上でWebフォントが使えるようになったと思います。注意したい事はWebフォントに頼りすぎたり、たくさんの種類のフォントを読み込んだりするとページの表示速度がすごく遅くなってしまいますので注意しましょう。