宮崎のWEB制作アドエス

Google Fontsの使い方

2015.03.19

近くに設置されていた自動販売機が撤去されてしまいました。
アドエスです。

 

最近ようやくwebフォントが使えるようになりました。アイコンのwebフォントとかすごく便利ですね。というわけで、今回はwebフォントの中でもGoogle Fontsの使い方をメモしておこうと思います。

 

webフォントって、ちょっと難しそうに聞こえますよね。なんか色々設定とかたいへんそうなイメージがあったのは私だけでしょうか。ですが、実際のところwebフォントって簡単に使えてしまいます。jQueryを使ったことがある方なんかは、ほぼ同じ感覚でできます。

 
 

1.Google Fontsで使用したいフォントを選ぶ

g_fonts1
使用するフォントを決めて右下の「Quick-use」をクリック

 
 

g_fonts2
詳細が表示されます。読み込み時間の目安なんかも出てます。

 
 
 

2.<head>内にwebフォントの呼び出しリンクを設置

g_fonts3
問題なければ、ここのリンクをコピーして<head>内に書き込みます。jQueryを使う時にjQueryの元ファイルへのリンクを書くのと同じ要領ですね。

 
 
 

3.CSSでフォントを設定

g_fonts4
ここにCSSのコードが出ているので使いたいタグにfont-familyを指定します。

 
 
 

4.ちゃんと摘要されたか確認

あとは確認して完了です。簡単ですね。

 
 

Hello World!
I can use the “googlefonts”.

 

フォントなのでCSSでドロップシャドウやカラー変更も簡単でいいですね。
※今回はテンプレートを触りたくなかったので<head>内ではなく、ブログ記事内にリンクを貼ってみました