Google Fontsを使って簡単にWEBフォントを使う方法

WEBフォントは、英語圏ではかなりメジャーなものらしくたくさんサービスがあります。最近は、日本語のWEBフォントなんかも無料で利用できる場合もあり今後も増えていく可能性はあります。インストールされているフォントに依存しないWEBフォントは、デザイナーさんなんかは表現の幅を広げることができるので助かるのではないのでしょうか。今回は無料で利用できるGoogle Fontsで提供されているWEBフォントをWordPressで使う方法を紹介します。

WEBフォントとは

普段ブラウザで見ているフォントは、PCにインストールされているフォントを使って表示しています。なのでCSSの「font-family」を使うときに使用できるフォントがインストールされているフォントに限られています。そこでWEBフォントというCSSで書かれているものを使ってブラウザにインストールされているフォントの有無を問わずに好きなフォントを表示できるサービスがあります。

中でもGoogle Fonts、Adobe Typekitは、海外で有名です。最近は、レンタルサーバ会社経由でモリサワのTypeSquareを使えたりできるようなりました。

Google Fontsとは

今回紹介するGoogle Fontsは英語を中心に800種類以上のWEBフォントが収録されています。また公式サポートはありませんが、日本語も一部収録されています。

Google Fontsの使い方

まずはGoogle Fontsで使いたいフォントを選びます。Google Fontsの場合選ぶフォントを複数選ぶことができます。複数選ぶことで読み込みスピードが遅くなるので選ぶフォントは慎重になった方がいいです。

Google Web Fontsにアクセス
使いたいフォントを選んで丸い「+」ボタンをクリック
使いたいフォントを選び終わったら<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>の「https://fonts.googleapis.com/css~」から始まるURLをコピー

Google Fontsで日本語を選ぶ場合

上の場合は、英語のみ使用する場合になります。日本語の場合ですとまだ正式にはリリースされていないのでGoogle Fonts + 日本語早期アクセス • Google Fonts + Japanese Early Accessからアクセスして日本語WEBフォントを選んで「https://fonts.googleapis.com/css~」からのリンクをコピーしてください。

WordPressでの使用方法

WordPressで使う場合は、functions.phpに以下のコードを貼り付けます。https://fonts.googleapis.com/css?family=Robotoの部分は、コピーしたURLに置き換えてください。

functions.php

function add_fonts() {
    wp_enqueue_style('web-fonts', 'https://fonts.googleapis.com/css?family=Roboto');
}
add_action('wp_enqueue_scripts', 'add_fonts');

そのあとにCSSファイル(通常は、style.css)に以下のコードを貼り付けます。「’Roboto’, sans-serif;」の部分は、コピーしたフォントに置き換えてください。

style.css

html {
  font-family: 'Roboto', sans-serif;
}

これでWEBフォントがページ全体に適用されます。ページ全体に適用したくない場合は、使いたい部分のCSSにfont-familyを適用してください。

日本語が使えるWEBフォント提供サービス

日本語をメインとしたWEBフォント提供サービスをあげておきます。特にモリサワが提供しているTypeSquareは、さくらレンタルサーバやX Sarverなんかで使えたりするので使っている方も多いかもしれないですね。

まとめ

Google Fonts使ったWEBフォントをWordPressで使う方法を紹介しました。WEBフォントは文字数が少ない英語では結構有用だと思います。日本語WEBフォントの場合ですと文字数が多いのでサービス側で工夫がかなりされているのではないかと思います。実際に使えるサービスとしてもあまり数が多くありません。

日本語は英語に比べて文字の数が格段に多くファイルサイズやリクエストが大きくなりサーバーのレスポンスに影響するからでしょう。これらを引いても文字というデザインにかなり影響がでるものをブラウザや環境によって導入してみたいです。