GoogleFontの導入方法とメリットを解説!なぜ今重要なのか

本記事ではGoogle Fontsの導入方法を解説していきます。フォントはサイトの雰囲気を左右する重要な要素ですが、Google Fontsを用いれば自分の好みのフォントを使えるようになります。またGoogle Fontsを導入することのメリットも解説するので、本記事を読むことで、なぜ今Google Fontsが重要なのかも理解できるようになるでしょう。

Google fontsとは

Google Fontsとは、Google提供の完全無料かつ商用利用も可能なWebフォントサービスです。様々な言語に対応しており、簡単なステップで導入することができます。

Google fontsを導入するメリット

Google Fontsもその1つであるWebフォントとは、あらかじめサーバーに置かれたフォントをダウンロードしたり、インターネット上にあるデータをダウンロードしたりすることでWebサイトに表示させるものです。

Webフォント以外に、デバイスフォントというものがあります。デバイスフォントとは、WindowsやiOS、AndoroidといったOS(またはデバイス)に依存したフォントで、Macでは表示できてもWindowsでは表示できないなどの状況が想定されます。

しかし、サーバーからダウンロードするWebフォントを導入したサイトは、閲覧環境に関係なく共通のフォントを表示させることができるのです。したがって、Google Fontsを導入したサイトも、全ての閲覧環境でサイト運営者の意図通りのフォントを見せることができます。

デバイスが多様化している状況において、まさにWebフォントは必須であると言えるでしょう。

Google Fontsの導入手順

今回は「kiwi Maru」というフォントを導入してみましょう。導入に成功すると、次にようにフォントが変わります。

【デフォルトのフォント】

【Google Fonts導入時】

Google Fontsを開く

まずはGoogle Fontsのホームページを開きます。

使いたいフォントを検索

使いたいフォントがある場合、左上の検索窓を使いましょう。

今回は「Kiwi Maru」を使うので、その通り検索します。候補が出てくるので(基本1つです)、「Kiwi Maru」を選択しましょう。

使用するスタイルの<link>をHTMLに貼り付ける

「Kiwi Maru」を選択すると、次の画像の通り表示されます。

各フォントには複数のスタイルがあり、赤枠で囲んだ「Select this style」で任意のものを選ぶことができます。今回は一番上の「Light300」を使用するので、一番上の「Select this style」を選択します。

すると以下のように右側にプレビューと、貼り付け用のコードが表示されます。

では、赤枠で囲んだ部分を全てコピーして、HTML文書の<head>内にペーストします。

CSSを貼り付ける

次は以下の画像で赤枠の部分をコピーします。

コピーしたらCSSファイルの内、フォントを「Kiwi Maru」にしたい部分にペーストします。今回はサイト全体に適用されるように、html{}にペーストします。

以上で導入完了です。今回は「Kiwi Maru」を導入しましたが、他の方法でも手順は同じです。

日本語フォントを探したい場合

最後に日本語に対応したフォントを探す方法を確認しておきます。方法は簡単です。次の画像の赤枠で囲んだところで、「Japanese」を選択します。

すると、日本語フォントの一覧が表示されます。

まとめ

Google Fontsは自分の好みのフォントを導入できるというメリットだけでなく、Webフォントという特性上、Google Fontsを使ったフォントは閲覧環境を選ばないというメリットもあります。本記事で見てきたように導入手順は簡単なので、積極的に活用するとよいでしょう。