GoogleFontsのウェブフォントをブログで使う方法

GoogleFontsでは、無料で様々なウェブフォントを利用することができます。
今回は、GoogleFontsをブログで使う方法を説明します。

GoogleFontsとは

GoogleFontsは、Googleが提供している、無料で利用できるウェブフォントサービスです。

ウェブフォントというのは、サーバーに置いてあるフォントのことです。
自分のブログのCSSに記述をするだけで、簡単にフォントを利用することができます。

また、サーバーにあるフォントを表示するので、どのデバイス（パソコン・スマートフォンなど）、OS（Windows・Mac・Android・iOSなど）でも同じ表示になります。

GoogleFontsの使い方

GoogleFontsの使い方を説明します。

フォントを選ぶ

Google Fonts

にアクセスします。

利用したいフォントを見つけ、フォント名の右側にある＋をクリックすると、画面下部に「1Family Selected」と表示されます。

複数のフォントを選択することも可能です。

画面右側の部分で、検索や絞込みをすることができます。

フォントのウェイト（太さ）を選ぶ

フォントの選択が終わったら、「○Family Selected（○は選んだフォント数）」をクリックし、選んだフォントの中で利用するウェイト（太さ）を決めます。

「CUSTOMIZE」をクリックして下さい。

「CUSTOMIZE」タブが表示されます。
使用するウェイト（太さ）にチェックマークを入れて下さい。

CSS（スタイルシート）に記述をする

今回は、CSS（スタイルシート）の記述のみで利用する方法を説明します。

再び、「EMBED」タブに戻り、「＠IMPORT」をクリックします。

子テーマのスタイルシートを開き、1行目の@charset "UTF-8";のすぐ下に①の部分を、フォントを指定したい要素に②の部分を記述します。

【サンプル】

/************************************
** スタイルシート
************************************/
@charset "UTF-8";
/*GoogleFonts*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
.
.
.
.
/*ブログタイトルフォント*/
#site-title a{
 'Roboto', sans-serif;
}

この手順で、GoogleFontsをブログの任意の場所で使うことができます。

さいごに

GoogleFontsを使えば、無料で簡単に色々なフォントを試すことができます。
英語のフォントであれば、あまり重くもないので、ページの表示速度にもそれほど影響はありません。

ただ、日本語のフォントはほとんどないので、使う場面は限られるかもしれません。