Webフォント。皆さん使いましたか？Webフォントの使い方がわからない、なんとなく導入するのが難しそう…と敬遠している方も多いのではないかと思います。今回は、Webフォントサービスの基本やメリット、使い方などを書いていきたいと思います。
目次
そもそもWebフォントって何？
ユーザーがWebブラウザを使ってWebサイトを見るとき、ユーザーが使う各端末にインストールされているフォントがCSSによって呼び出され、文字が表示されます。Webサイトの制作者がCSSで指定したフォントが、ユーザーの使う端末に搭載されていない場合、制作者が指定したものではないフォント(ユーザーの端末に標準搭載されているフォント)でテキストが表示されてしまいます。
例えば、制作側がサイトをつくる際にCSSでフォント名を「ヒラギノ角ゴ」を指定したとします。Macには標準搭載されている「ヒラギノ角ゴ」ですが、Windowsには搭載されていないので、Windowsで閲覧するとWindows標準搭載フォント「メイリオ」で表示されてしまいます。文字のデザイン問題を解決するために生まれたのがWebフォントです。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
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ファイルの内に貼り付けます。
例）
<head> <link href="https://fonts.googleapis.com/css?family=Saira+Condensed" rel="stylesheet"> </head>
Step3.CSSでfont-familyを指定
ダイアログ下部にある「font-family: ’〜’」をコピーしてfont-familyに設定します。
例)
h2{
font-family: 'Saira Condensed', sans-serif;
}
もっと色々な日本語フォントが使いたい方におすすめのサイト
『FONT＋(フォントプラス)』有料Webフォントサービス 全987書体(2018.04時点)日本語Webフォントも豊富です。
ソフトバンクが提供するWebフォントサービス、FONT WORKSを中心に、色々なフォントメーカーのフォントが利用できます。
モリサワのフォントも含まれていますが、Type Squareに比べると使えるfont-weightが少なかったりします。 半年間、条件付きで無料トライアルが出来ます。
またFONT＋ではWebフォントを自動でサブセット化ができサイトが重くなりません。
『Type Square(タイプスクエア)』有料Webフォントサービス 全893書体(2018.04時点)日本語Webフォントも豊富です。
90年以上の歴史を持つ老舗フォントメーカー、モリサワが提供するWebフォントサービスです。
MORISAWA PASSPORT ONEのライセンスを持っていれば、無料で利用できます。
Type squareも自動でサブセット化が出来ます。
Googleフォントまとめ
WEBフォントをうまく使うことで、テーマがわかりやすくアクセントのあるwebサイトに早変わりすること間違いなしです！
まずは無料のGoogleフォントから気軽に使ってみてはいかがでしょうか。
さらに詳しいwebフォントの使い方を知りたい方はコチラ『webフォントを使って、ワンランク上のサイト作りを』
