Google Fonts グーグルフォント の 使い方
2016.07.19
カテゴリ：WEB制作
タグ：
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>間に読み込ませます。
|
1 |
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> |
CSSで指定
[4. Integrate the fonts into your CSS:]の部分をコピーしてCSSで使いたいセレクタに挿入していきます。
|
1 2 3 |
body { font-family: 'Open Sans', sans-serif; } |
3.外部CSSを使って取り込む
importで取り込み
HTMLで取り込む場合と同様にタグをコピーするんですが、【http:】と【rel〜】の部分は無くてオッケーです。
|
1 |
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,700); |
CSSで指定
ここはCSSなのでとHTMLの場合と同様で使いたいセレクタに挿入するだけです。
|
1 2 3 |
body { font-family: 'Open Sans', sans-serif; } |
4.まとめ
以上でWebフォントが使えるようになったと思います。注意したい事はWebフォントに頼りすぎたり、たくさんの種類のフォントを読み込んだりするとページの表示速度がすごく遅くなってしまいますので注意しましょう。
