Webサイトのフォントを変えてサイトの印象を変えたいと思っているけど、Webフォントってどうやって使うんだろう？お金かかるのかな？
そんな疑問に答えます。
今回は、無料で利用できるGoogle Fontsの使い方についてまとめていきたいと思います。
Google Fontsとは
Google Fonts（グーグルフォント）とは、無料で利用できるWebフォントです。
Webフォントは、インターネット経由でサーバーからフォントデータを読み取って表示するので、ユーザーの閲覧環境に左右されることなく使えるフォントのことを言います。
日本語のフォントで充実しているのは、モリサワのTypeSquareですが、プランによっては有料となります。
Google Fontsのすべてのフォントはオープンソースのため、無料でかつ商業利用も可能となっている便利なWebフォントです。
さっそく使い方について見ていきましょう。
Google Fontsの適用方法
まずはGoogle Fontsのサイトを見てみましょう。
■Google Fonts
https://fonts.google.com/
色々なフォントがありますので、気になるフォントを見つけてください。気になるフォントが見つかったらフォントの右上にある＋マークのボタンをクリックします。
すると、右下にセレクトバーが出現するのでクリックしてみます。
すると、埋め込み情報が記載されているので、htmlの<head>要素内とCSSにそれぞれ記載をします。
これで、Webフォントの適用は以上です。HTMLファイルを見てみましょう。選択されたフォントで適用されていることがわかるかと思います。
カスタマイズ方法
先程は、シンプルな適用方法について記載しましたが、カスタマイズ方法について見ていきましょう。先程の埋め込み情報の画面で「CUSTOMIZE」をクリックしてみてください。
通常はregularの指定のみですが、太さや斜体を選択することもできます。
その他便利な機能
その他にも色々な便利機能があるので紹介します。
さまざまな検索方法
Google Fontsをスクロールしてみてもらえればわかりますが、非常に多くのフォントがあるので、目的のフォントを探すのも一苦労です。ここでは、さまざまな検索方法についてまとめます。
カテゴリー検索
左上の「Categories」というドロップダウンメニューでカテゴリによるフィルターを掛けることができます。それぞれの意味は以下の通りです。
- Serif：明朝体
- Sans Serif：ゴシック体
- Display：装飾文字
- Handwriting：手書き文字
- Monospace：等幅フォント
言語
「Language」で言語の選択をできます。日本語もありますが、フォント数はあまり多くありません。
フォントプロパティ
フォントの特性によってフィルタリングをかけます。指定できるのは以下です。
- Number of Styles：スタイルの数。
- Thickness：文字の太さ
- Slant：文字の斜体具合
- Width：文字の幅
オススメのフォント組み合わせ
選択したフォントと一緒によく使われてるフォントを提示してくれます。フォント名をクリックするか、「SEE SPECIMEN」をクリックしてください。
画面をスクロールして左下にある「Popular Pairings with … 」が一緒によく使われてるフォントです。組み合わせのデモもすることができます。
好きなテキストでプレビューする
各フォントに記載されている例文は書き換えることが可能です。想定している使い方をプレビューで確認することが出来ます。
まとめ
いかがでしたか？
フォントを変えるだけでWebサイトの印象はグッと変わります。Google Fontsを利用してサイトのイメージに合ったフォントを探して使ってみましょう。では！
コメント