Webサイトを作る上でフォントは重要だ。
フォントが変わるとサイトの印象はガラリと変わる。
しかし、環境によってはあまり良いフォントが使えないかもしれない。

そこで便利なのがGoogle Fontsだ。
今回はGoogle Fontsを使うまでの手順を追ってみる。
 
Google Fontsを使うための準備
まずはここにアクセスする。

Google Fonts
このような画面が表示されるので使いたいフォントを決めて
右側の"Add to Collection"ボタンを押す。
ss_google-font01
ここでは、特徴があるOswaldとLobstarを選択してみた。

次にウィンドウの右下にある"Use"ボタンを押す。
ss_google-font02
すると次のような画面が表示されるので、その中から使いたいものを選ぶ。
この例では数が少ないが、もっと多くの種類のスタイルが用意されているフォントもある。
ss_google-font03
そのページの下の方に以下の様な箇所があるので
そこのタグを自分が使いたいサイトのページにコピペする。
ss_google-font04
これで準備は完了だ。

Google Fontsを実際に使ってみる
では実際に使ってみよう。
以下の様なHTMLを用意した。


上から順に
  1. Lobstar
  2. Oswald
  3. Oswald(Bold)
とする予定だ。

次は実際に各フォント用のスタイルを設定してみよう。

特に言うべきことは無い。
font-familyを設定して、Boldにはfont-weightを設定しているだけだ。
では結果を見てみよう。
ss_google-font05
ちゃんと表示された。

font-familyの指定方法については先ほどのページのさらに下の方に例が書いてあるので
それらを参考にしよう。
ss_google-font06
ちなみに、日本語には対応していないので、使いどころには十分注意しよう。