GoogleFontsを使ったWEBフォントの使い方

2018/07/26

GoogleFonts WEBフォント デザイン

t f B! P L

CSS3からWEBフォントが使えるようになりましたが、今まではWEB上でフォントを使う場合は、閲覧者のPCにインストールされていないと表示されませんでした。その為、「MS Pゴシック」や「メイリオ」や「ヒラギノ」など、WindowsやMacに標準でインストールされているフォントを利用するのが一般的でした。
WEBフォントはサーバー上にあるフォントを利用するので、閲覧者の環境に関係なくデザインされたフォントを表示させる事ができまる仕組みです。オシャレに見せたいから画像にしていたという部分も、WEBフォントを使えばテキスト状態のままデザイン表現を可能とします。

WEBフォントのメリット・デメリット

WEBフォントのメリットとしては、テキスト情報なのでSEOに強い、文字修正が簡単、画像の使用が減るのでページ全体の容量を減らすことが出来るなどが上げられます。
一方デメリットとしては、(特に日本語フォントは文字数が多いので)表示に時間がかかる、という点が上げられます。
またWEBフォントを使う場合は、著作権が問題ないかは確認する必要があります。

便利なGoogleFonts

WEBフォントを使う場合、購入しているフォントがWEBフォントに対応していたとしても、WEBフォントで利用する場合は別途契約(料金も)が必要というのがほとんどなので、ご注意ください。
そんな予算は無いという方に便利なのがGoogleFontsというサービスです。Google社がライセンス無料で提供しているフォントで、簡単な設定で自身のホームページに利用できます。日本語もあり、お金を掛けずWEBフォントを利用したい方にオススメです。

GoogleFontsで英語のWEBフォントを使う方法

GoogleFontsにアクセスします。

利用フォントを選ぶ

フォントのリストで並ぶので、利用したいフォントの「+」ボタンを押してフォントを追加します。

フォントを選び終えたら画面下の「Families Selected」をクリックするとウィンドウが表示されます。その中の「CUSTOMIZE」を選ぶと、それぞれのフォントのスタイルを選択する事が出来ます。あまり選びすぎると読み込み速度に影響するので、必要なものだけにチェックを入れるようにしてください。
GoogleFonts画面1



WEBフォントの読み込み方法は、link要素で読み込む方法とCSSから読み込む方法の2種類あります。やりやすい方法で読み込んでください。

link要素で読み込む場合

先ほどのウィンドウの「EMBED」をクリックします。その下に表示されるlink要素をコピーして、htmlのhead要素内に貼り付けます。
GoogleFonts画面2

CSSから読み込む場合

先ほどのウィンドウの「EMBED」をクリックします。「@IMPORT」をクリックします。その下に表示される要素をコピーして、htmlのheadにコピーします。
GoogleFonts画面3

要素にフォントを適用する

最後に「Families Selected」ウィンドウの下の「Specify in CSS」エリアに記載されているfont-familyをCSSで指定すれば、その指定した要素にGoogleFontsのWEBフォントが適用されます。
GoogleFonts画面4

GoogleFonts+で日本語のWEBフォントを使う方法

GoogleFontsには日本語が無いので、日本語のWEBフォントを使いたい方は、GoogleFonts+ 日本語にアクセスします。

まだ試験的な要素もあり、漢字が使えなかったり、漢字の一部が無かったりするので、仕事で使う場合はご注意ください。現在利用できるフォントは以下の9種類です。(2018年7月現在)

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニコモジ
  • ニクキュウ
  • Noto Sans Japanese

フォントを読み込む

下にスクロールするとそれぞれのフォントが表示されるので、利用したいフォントのHTMLと書かれた場所に記載さているlink要素をコピーします。それをhtmlのhead要素内に貼り付けます。
GoogleFonts+ 日本語 設定画面1

要素にフォントを適用する

CSSの下に記載された内容をコピペして、CSS内に貼り付けます。
GoogleFonts+ 日本語 設定画面2

次にhtmlソース内で適用したい要素に、CSSで指定されているclass名を指定すれば適用されます。上記フォントを利用する場合は「wf-mplus1p」をclass名として指定します。※利用フォントによってclass名は違うのでご注意ください

  1. <h1 class="wf-mplus1p">



その他の日本語対応のWEBフォントご紹介

GoogleFontsも便利ですが、日本語は9種類と少なく仕事で使うには不安が残ります。そんな方に他の日本語対応したWEBフォントをご紹介します。

TypeSquare(有料・無料版も有)

説明不要な有名フォント「モリサワ」のWEBフォントです。サイト規模によって料金が変わりますが、1万PV以下だと無料で始められるプランもあります。「リュウミン」や「新ゴ」など、おなじみのモリサワフォントがWEBフォントとして使えます。
TypeSquare

FONTPLUS(有料・無料版も有)

「Fontworks」「白舟書体」など、様々なフォントが利用できるWEBフォントサービスです。一部「モリサワ」も使えるようです。10万PVまでは1,080円/月とリーズナブルな料金で利用できます。
FONTPLUS

Adobe Typekit(有料・無料版も有)

Photoshopなどを提供するadobe社のWEBフォントサービスです。2.5万PV/月までは無料で使えますが、英語フォントが中心で日本語フォントが6種類しかありません。(有料版は88種類の日本語フォントが利用可能です)
Adobe Typekit

日本語のWEBフォントは表示が重いと書きましたが、提供側がより高速に表示されるよに日々改善を行っております。またJavaScriptやCSSの新プロパティfont-displayで読み込みまでの間を通常フォントを表示して補間する手法も存在します。
なかなか制約も多いWEBフォントですが、デザインフォントの修正がhtmlソース上で修正できるのは本当に楽なので、個人のブログやサイトを運営している方は、一度使ってみてはいかがでしょうか。

このブログを検索

運営者

WEBにかかわる仕事に10年以上従事し、WEBディレクション、WEBデザイン、コーディング、JavaScript開発、広告運用,、サイト解析などを経験。

知識をアウトプットする事で自分のスキルがより磨かれることを期待すると共に、どなたかの役に立てればという想いで記事を書いています。