初心者必見!Google fontsの使い方とメリットを簡単解説

記事公開日:2018.04.26

最終更新日:2018.05.10

2,162 PV

 

Webフォント。皆さん使いましたか?Webフォントの使い方がわからない、なんとなく導入するのが難しそう…と敬遠している方も多いのではないかと思います。今回は、Webフォントサービスの基本やメリット、使い方などを書いていきたいと思います。

 

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

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

 

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

デザイン問題について更に詳しく書かれた記事がコチラ『デザインに行き詰まりを感じたとき、試す価値のある7の方法』

 

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

 

Webフォント機能を使うメリット

Webフォントを使うメリットを上げていきたいと思います。

1.SEOに強いWebサイトになる

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

2.アクセシビリティの向上

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

日本語がわからない外国人の方は、翻訳機能を使ってサイトの内容を理解することができます。

3.レスポンシブ化しやすい

画像内のテキストが、スマートフォン表示にすると文字が小さすぎて読めないこと、よくありますよね。Webフォントを利用すれば、文字サイズをCSSで調節出来るので、スマートフォン用の画像を別に用意する手間が省けます。

 

他にも、ユーザーが「このテキスト部分、コピーして検索したい」と思ったときに、画像だとコピーできないですが、Webフォントであればコピーペーストできるので、ユーザーにとって使い勝手の良いサイトにすることができます。

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

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

 

Webフォント機能を使うデメリット

便利なWebフォントですがデメリットもあります。

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

WEBフォントを目立つタイトルなどに使う場合が多いと思うのですが、文字の間隔が不揃いだったり、和文欧文混合の文章で、和文フォントが欧文フォントよりひとまわり大きく見えたりします。

細かな文字組の調節をするには、フォントごとにスタイルを当てる必要があるので、画像で入れてしまう場合と比べると少し手間がかかります。

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

おそらくWEBフォントの使用するうえで、一番ネックになっている部分ではないでしょうか。

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

 

Google WEBフォントの使い方

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

 

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

『Google Fonts』にアクセスし、使いたいWEBフォントファイルを探します。

 

Google Fontsには832書体(2018.08時点)ものWebフォントがあり、なんと全てがフリーフォント、日本語のフォントも試験段階ではありますが9書体、提供されています。

 

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

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

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

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

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

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

Google Fontsの導入方法5

例)

 Step3.CSSでfont-familyを指定

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

Google Fontsの導入方法6

例)

もっと色々な日本語フォントが使いたい方におすすめのサイト

『FONT+(フォントプラス)』有料Webフォントサービス 全987書体(2018.04時点)日本語Webフォントも豊富です。

ソフトバンクが提供するWebフォントサービス、FONT WORKSを中心に、色々なフォントメーカーのフォントが利用できます。

モリサワのフォントも含まれていますが、Type Squareに比べると使えるfont-weightが少なかったりします。 半年間、条件付きで無料トライアルが出来ます。

またFONT+ではWebフォントを自動でサブセット化ができサイトが重くなりません。

『FONT+』

 

『Type Square(タイプスクエア)』有料Webフォントサービス 全893書体(2018.04時点)日本語Webフォントも豊富です。

90年以上の歴史を持つ老舗フォントメーカー、モリサワが提供するWebフォントサービスです。

MORISAWA PASSPORT ONEのライセンスを持っていれば、無料で利用できます。

Type squareも自動でサブセット化が出来ます。

『Type Square』

Googleフォントまとめ

WEBフォントをうまく使うことで、テーマがわかりやすくアクセントのあるwebサイトに早変わりすること間違いなしです!
まずは無料のGoogleフォントから気軽に使ってみてはいかがでしょうか。

さらに詳しいwebフォントの使い方を知りたい方はコチラ『webフォントを使って、ワンランク上のサイト作りを』

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

筆者

t.inagaki

2018年の4月からパート社員として9時から5時の間働かせていただいてます。今までとは全く畑違いの業種のため制作の仕事はもちろんのこと、日々様々なことを皆様から勉強させていただいております。趣味は絵を描くこととゲームをすることで、好きな食べ物はお米とお酒です。学生時代大阪に住んでいたこともあり連休中は稀に大阪や京都に出かけてゲームの大会に出たり居酒屋を巡ったりしてます。猫を飼っており出勤前に車の中でコロコロをするのが日課になりつつあります。

筆者が最近執筆した記事