Webフォントを使ってみよう!Google Fontsの導入ガイド

CSS3から利用できるようになったWebフォント。
皆さんはもう使いましたか?
なんとなく導入するのが難しそう…と敬遠している方も多いのではないかなと思います。
今回の記事では、Webフォントの基本やメリットの他、Webフォントの中でも最も導入が簡単なGoogle Fontsの導入方法を解説します。

そもそもWebフォントって何?

ユーザーがWebブラウザを使ってWebサイトを見るとき、ユーザーが使う各端末にインストールされているフォントがCSSによって呼び出され、文字が表示されます。
Webサイトの制作者がCSSで指定したフォントが、ユーザーの使う端末に搭載されていない場合、制作者が指定したものではないフォント(ユーザーの端末に標準搭載されているフォント)でテキストが表示されてしまいます。

例えば、制作側がサイトをつくる際にCSSで「ヒラギノ角ゴ」を指定したとします。
Macには標準搭載されている「ヒラギノ角ゴ」ですが、Windowsには搭載されていないので、Windowsで閲覧するとWindows標準搭載フォント「メイリオ」で表示されていしまいます。

そのような問題を解決するために生まれたのがWebフォントです。
ネットワーク上にフォントデータを置き、ユーザーがサイトを表示する際に、そのフォントデータが自動でユーザーの端末にダウンロードされることで、ユーザーの使う端末のフォント環境に依存すること無く、制作側の思い通りのフォントをサイトにレンダリングできるようになりました。

Webフォントを使う上でのメリット・デメリット

メリット

SEOに強いWebサイトになる

テキストを画像にしてしまうと、検索エンジンにサイトの内容が伝わりにくくなり、ページの評価が上がりにくくなってしまいます。
画像のalt属性(代替テキスト)のSEO効果はそれほど期待できるものではないので、やはりテキストデータのほうが、検索エンジンに評価されやすくSEOに強いサイトにすることができます。

アクセシビリティの向上

Webでいうアクセシビリティとは、年齢や障害の有無、利用環境に左右されることなく、誰もがストレスなく利用できることを意味します。
本来画像で入れていた部分をWebフォントを使いテキスト打ちにすることで、目に障害がある方は、音声読み上げ機能や文字サイズの切り替え機能を使うことができますし、日本語がわからない外国人の方は、翻訳機能を使ってサイトの内容を理解することができます。

レスポンシブ化しやすい

画像内のテキストが、スマートフォン表示にすると文字が小さすぎて読めない!なんてこと、よくありますよね。
Webフォントを利用すれば、文字サイズをCSSで調節出来るので、スマートフォン用の画像を別に用意する手間が省けます。
その他にも、ユーザーが「このテキスト部分、コピーして検索したい」と思ったときに、画像だとコピーできないですが、Webフォントであればコピーペーストできるのでユーザーにとって使い勝手の良いサイトにすることができます。

情報の修正が簡単に行える

画像内のテキストを修正したい場合、Webフォントを使っていれば、HTMLとCSSを編集するだけで簡単に修正できるので、IllustratorやPhotoshopなどのデザインソフトを使えない人でも、サイトのメンテナンスや更新を簡単に行うことができます。

デメリット

細かな文字組の調節に手間がかかる

Webフォント目立つタイトルなどに使う場合が多いと思うのですが、文字の間隔が不揃いだったり、和文欧文混合の文章で、和文が欧文よりひとまわり大きく見えたり、細かな文字組の調節をするには、1文字1文字スタイルを当てる必要があるので、画像で入れてしまう場合と比べると少し手間がかかります。

ホームページの表示に時間がかかる

これがWebフォントの使用するうえで、一番ネックになっている部分ではないでしょうか。
欧文であれば、アルファベットの大文字と小文字に数字と記号を加えても100字程度なので、ファイルサイズも250KBほどで済みますが、日本語はひらがな・カタカナ・漢字で7000文字以上もあるため、少なからずサイトは重くなってしまいます。

ですが、その問題はフォントセットの“サブセット化”で緩和できるのです。
サブセット化とは、ダウンロードしたフォントセットの中から、Webサイトで使わない文字を取り除くことです。
サブセット化することにより、通常10MB以上ある日本語フォントのファイルサイズが1MB以下に削減できます。
サブセット化の手順については下記のサイトで詳しく説明されています。
サブセットでWebフォントの軽量化-Mac使いの備忘録 iRec

また、この後紹介する日本語Webフォントサービス「FONTPLUS」「TypeSquare」では、Webフォントを自動でサブセット化してくれるので、とても便利です。

Google Fontsの導入方法

ここまで読んでいただいて、実際にWebフォントを使ってみたい!と思った方のために ここからは、Webフォントの中でも最も導入が簡単なGoogleのWebフォントサービス「Google Fonts」の導入方法を解説していきます。
3スッテプであっという間に導入できてしまうので、ぜひ実践してみてください。

Step1.使いたいフォントを探す。

Google Fonts
上記サイトにアクセスし、使いたいWebフォントを探します。
Google Fontsには832書体(2017.08時点)ものWebフォントがあり、全て無料で使用できます。
日本語のフォントも試験段階ではありますが9書体、提供されています。
もっと色々な日本語のWebフォントを使いたいという方には、今からご紹介する2つの日本語Webフォントサービスを利用することをおすすめします。

FONT+(フォントプラス)

有料 全944書体(2017.08時点)
ソフトバンク・テクノロジーが提供するWebフォントサービス
FONT WORKSを中心に、IWATA、MOTOYAな、白舟書体など、色々なフォントメーカーのフォントが利用できます。
モリサワのフォントも含まれていますが、Type Squareに比べると使えるfont-weightが少なかったりします。 半年間、条件付きで無料トライアルが出来ます。

Type Square(タイプスクエア)

有料 全817書体(2017.08時点)
90年以上の歴史を持つ老舗フォントメーカー、モリサワが提供するWebフォントサービス
MORISAWA PASSPORT ONEのライセンスを持っていれば、無料で利用できます。
持っていない方でも、月1万ページビュー以内なら、1書体だけ1つのドメインでのみ無料で利用できます。

使いたいフォントが決まったら、右上の赤い+をクリックします。

すると、画面下に黒い帯のついたダイアログが表示されます。

font-weightやスタイルを変えたい場合は、黒帯の右端にある−をクリックして、「CUSTOMIZE」タグの中で設定できます。

Step2.HTMLにフォントの読み込みコードを貼る

フォントスタイルの設定が完了したら、「EMBED」タブをクリックします。

ダイアログ中ほどにあるコードをそのままコピーして、htmlファイルの内に貼り付けます。

Google Fontsの導入方法5

例)

 Step3.CSSでfont-familyを指定

ダイアログ下部にある「font-family: ’〜’」をコピーしてfont-familyに設定します。

Google Fontsの導入方法6

例)

以上でGoogle Fontsの導入完了です。 思っていたより、ずっと簡単ですよね!
Webフォントをうまく使うことで、アクセントのあるサイトに早変わりすること間違いなしです!
まずは無料のGoogle Fontsから気軽に導入してみてはいかがでしょうか。

 

 

このエントリーをはてなブックマークに追加

筆者

S.Yamaguchi

Bigmac制作部で、主にWebデザイン兼コーディングを担当しています。 シンプルでフラットなデザインが得意です。 好きな飲み物はカフェオレで、夢はクラゲを飼うことです。
 座右の銘は、「ケセラセラ(なるようになるから流れるままにいこう)」 休日は、海外ドラマかアニメを見ています。 最近、髪をばっさり切って小さいきのこになりました。 どうぞ宜しくお願いします。

筆者が最近執筆した記事