ご存知の方も多いかと思いますが、商用・非商用問わず無料で使えるWebフォントGoogle Fontsの使い方を紹介します。
通常、ブログやサイトのフォントは、パソコンにインストールされているものしか使えませんが、Google Fontsを使うことで、任意のフォントを表示させることができます。
使い方は簡単で、
- 使いたいWebフォントを選ぶ
- CSSを<head>内に追加する
- Webフォントを使いたい場所にFontを適用させる
という感じです。
1. 使いたいWebフォントを選ぶ
Google Fontsにアクセスし、使いたいフォントで [Add to Collection] をクリックします。選択を解除する場合は [Remove from Collection] をクリックします。
フォントの選択がおわりましたら、ページの左下に表示されている [Use] をクリックします。
すると、使用するフォントのスタイルを選択します。フォントの選択数が多くなると、ページの読み込み時間への影響が大きくなりますので、注意が必要です。
2. CSSを<head>内に追加する
次に表示されているコードを自分のサイトの<head>内に追加します。
<link href="http://fonts.googleapis.com/css?family=Raleway|Nova+Square|Orbitron|Oxygen|Pacifico|Geo" rel="stylesheet" type='text/css'>
3. Webフォントを使いたい場所にFontを適用させる
最後にスタイルシートにてfont-familyを適用します。
p{
font-family: 'Oxygen', sans-serif;
}
これで、Google Fontsがサイトに適用されます。実際にどんな感じで表示されるかは、デモページでご覧いただけます。
以上、無料Webフォント Google Fontsの使い方&設定方法です。
ブログのデザイン変更に使ってみてはいかがでしょうか。興味がある方はぜひ、お試しください。