Google Fontsを使ってみよう

お手軽にフォントを変えたいときに便利なのがwebフォントですよね。

その中でも最大手である「Google Fonts」の使い方を紹介してみます。

Google Fontsとは？

無料でフォントを使用できるサービスです。
GoogleのWebサーバーからフォントデータを読み込んで、サイトに表示させていきます。
Googleフォントを使えば、フォントのデータをサーバーから読み込むため、どの端末でも同じフォントを表示させることができます。
便利だからと言って使用するフォント種類を増やしてしまうと動作が遅くなりますので注意が必要です。
日本語のフォントも少ないですが用意されています。逆に英字フォントはたくさんありますので使用用途に合わせて使ってみてください。

Google Fontsを使ってみる

まずはGoogle Fontsのページに行ってみましょう！
ググればすぐでてきます。

使いたいフォントを探す

一覧の中から使いたいフォントを探して、使いたいフォントが見つかったら使いたいフォントをクリックしてみましょう
フォントの太さや種類が確認できます。

フォントデータを読み込む

使用したいフォントが決まったら「Select this style」をクリックします。

次に真ん中あたりにある「link要素」を使います。
link要素はフォントのデータを読み込むために必要なものなのでコード全てをドラッグしてコピーしましょう。
張り付ける場所はHTMLファイルのhead要素内になります。
ご自身で作っていいるcssファイルよりも前に読み込まれるように張り付けてあげましょう。
ネットにつながっている環境であればこれでGoogle Fontsを使う準備は完了です。

CSSでフォントの設定をする

次は今コピーしたコードの少し下「Specify in CSS」のところにある「font-family」の記述を見てみましょう
font-familyはフォントを設定するためのプロパティです
このfont-familyをコピーし変えたい要素のセレクタの中に張り付けましょうこれで自分で選んだフォントをwebサイトに表示することができるようになります
かなりお手軽なので試してみましょう。他とは少し違った表現ができるかもしれません。

まとめ

いかがでしたか？
Google フォントはとても簡単に無料で使用できるのでサイトの印象を変えたいと思っている方は一度使ってみてください。

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。