Webサイトを作る上でフォントは重要だ。
フォントが変わるとサイトの印象はガラリと変わる。
しかし、環境によってはあまり良いフォントが使えないかもしれない。
そこで便利なのがGoogle Fontsだ。
今回はGoogle Fontsを使うまでの手順を追ってみる。
フォントが変わるとサイトの印象はガラリと変わる。
しかし、環境によってはあまり良いフォントが使えないかもしれない。
そこで便利なのがGoogle Fontsだ。
今回はGoogle Fontsを使うまでの手順を追ってみる。
Google Fontsを使うための準備
まずはここにアクセスする。
Google Fonts
このような画面が表示されるので使いたいフォントを決めて
右側の"Add to Collection"ボタンを押す。

ここでは、特徴があるOswaldとLobstarを選択してみた。
次にウィンドウの右下にある"Use"ボタンを押す。

すると次のような画面が表示されるので、その中から使いたいものを選ぶ。
この例では数が少ないが、もっと多くの種類のスタイルが用意されているフォントもある。

そのページの下の方に以下の様な箇所があるので
そこのタグを自分が使いたいサイトのページにコピペする。

これで準備は完了だ。
Google Fontsを実際に使ってみる
では実際に使ってみよう。
以下の様なHTMLを用意した。
上から順に
次は実際に各フォント用のスタイルを設定してみよう。
特に言うべきことは無い。
font-familyを設定して、Boldにはfont-weightを設定しているだけだ。
では結果を見てみよう。

ちゃんと表示された。
font-familyの指定方法については先ほどのページのさらに下の方に例が書いてあるので
それらを参考にしよう。

ちなみに、日本語には対応していないので、使いどころには十分注意しよう。
まずはここにアクセスする。
Google Fonts
このような画面が表示されるので使いたいフォントを決めて
右側の"Add to Collection"ボタンを押す。

ここでは、特徴があるOswaldとLobstarを選択してみた。
次にウィンドウの右下にある"Use"ボタンを押す。

すると次のような画面が表示されるので、その中から使いたいものを選ぶ。
この例では数が少ないが、もっと多くの種類のスタイルが用意されているフォントもある。

そのページの下の方に以下の様な箇所があるので
そこのタグを自分が使いたいサイトのページにコピペする。

これで準備は完了だ。
Google Fontsを実際に使ってみる
では実際に使ってみよう。
以下の様なHTMLを用意した。
上から順に
- Lobstar
- Oswald
- Oswald(Bold)
次は実際に各フォント用のスタイルを設定してみよう。
特に言うべきことは無い。
font-familyを設定して、Boldにはfont-weightを設定しているだけだ。
では結果を見てみよう。

ちゃんと表示された。
font-familyの指定方法については先ほどのページのさらに下の方に例が書いてあるので
それらを参考にしよう。

ちなみに、日本語には対応していないので、使いどころには十分注意しよう。
コメント