こんにちは、yutaです。
みなさん、Webフォントってご存知ですか？
Webページ制作中に手書き風や漫画風などのデザイン性のあるフォントを使いたくなることってありますよね。でも、いざ使ってみるとChromeではきちんと表示されるのにSafariでは違うフォントになっていたり、スマホだとまた違うフォントだったり・・・。特殊なフォントを使うのって意外と大変ですよね。
そういうフォント表示に対する悩みを解決するのがWebフォントです。現状、Webフォントは有料のものが多いのですが、無料のWebフォント「Google Fonts」を少し試してみたので、簡単に紹介します。
1.Webフォントとは
2.Webフォントのメリット
3.Webフォントのデメリット
4.無料のWebフォント「Google Fonts」に触れてみる
4-1.Google Fontsの使い方
4-2.Google Fontsを各ブラウザと端末で確認
1.Webフォントとは
Webフォントとは・・・Webページが開かれる時にサーバー上に置かれているフォントを呼び出して表示するもの。
通常、Webページを見る時には各ユーザーが使用しているパソコンやスマホの中に入っているフォントを使用して文字を表示しています。Webページを制作した人は、「こういうフォントで表示してほしい」という要望をCSSというプログラムに記述していますが、例えこのような要望を記述していたとしても、Webページを見にきたユーザーの端末に該当するフォントが無ければそのフォントは表示できません。
この問題を解決するのがWebフォントです。先ほどの説明にあった通り、Webフォントはサーバー上に置かれているフォントを読み出して表示するので、そのWebページを見にくるユーザーの端末に寄らず、Webページ制作者の意図したフォントを表示することができるのです。
2.Webフォントのメリット
Webフォントを利用することで以下のメリットが得られます。
・誰が見ても同じフォントを表示できる
Webフォントは、Webページを閲覧する端末やブラウザに寄らずにフォントを表示できるので、Webページ製作者が意図したフォントを常に表示することができます。
・SEO的に有利になる
大見出しなどで強調させたりデザイン性のために特殊なフォントを利用する場面がありますが、様々なユーザーに合わせて文字ではなく「文字を画像にしたもの」を使用することが良くあります。(画像ならブラウザや端末によらず同じフォントで表示できるため。)
しかしこの場合、Googleのロボットはその画像を文字としては捉えないため、見出しの内容を理解できずSEO的に不利になります。ここでWebフォントを使うことで、画像を使用する必要がなくなるためGoogleのロボットが見出しの内容を理解できSEO的に有利になります。
3.Webフォントのデメリット
現状、Webフォントには以下のようなデメリットがあります。
・有料のWebフォントが多い
Webフォントサービスとしては、モリサワの「TypeSquare」、アドビシステムズの「Adobe Typekit」、Monotypeの「fonts.com」などがありますが、いずれも有料なので気軽には手を出せませんよね。
※TypeSquareのWebフォントは無料で使えるプランもありますが、使用するサイトのPV(ページビュー)が1万PV/月までという制限があります。
※エックスサーバーもレンタルサーバーを契約している方ならモリサワのWebフォントが無料で使えるようですが、こちらもPV制限があり、25,000PV/月までです。
4.無料のWebフォント「Google Fonts」に触れてみる
有料のWebフォントが多い中、Google Fontsは完全無料で利用できます。さすが、Google神。
さっそく、使ってみました。
4-1.Google Fontsの使い方
(1)まず、Google Fontsにアクセスします。
(2)以下のように色々なフォントが出てくるので気に入るものを探します。
(3)気に入ったフォントの右上にある＋ボタンを押します。
(4)画面下に下画像のようなものが出てくるのでーボタンを押します。
(5)2つコードが出てくるので、上のコードをHTMLファイルの<head>エリア内にコピペ、下のコードをCSSファイルのWebフォントを適用させたいセレクタにコピペすれば準備OKです。
4-2.Google Fontsを各ブラウザと端末で確認
4-1でWebフォントを適用したサイトをPCとスマホ(iPhone 8Plus)で、いずれもSafariとChromeを使って見てみました。結果は以下の通り、全てのブラウザおよび端末で指定したWebフォントが表示されました。素晴らしい。
今回は、Webフォントの説明と、Google Fontsが提供している無料のWebフォントを使用してみました。どんな端末やブラウザでも同じフォントが表示できるというのは素晴らしいですね。現状、Google Fontsでは日本語のWebフォントがそんなに多くないのですがこれからもっとバラエティーが増えていくことを期待したいです。皆さんのぜひ試してみてくださいね。では、また！
ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)
