Webフォントの基本を理解しよう

はじめに

フォントには画像データでアップされたフォントやPCに元々、入っているデバイスフォントの他に「Webフォント」という概念のものがあります。有名な例だとGoogleFontsというものがあります。

今回はWebフォントを中心に説明していきたいと思います。

---

Webフォントについて

「Webフォント」とはWebサーバーから取得したフォントデータをwebブラウザ上でテキストデータとして表示されるフォントのことです。

Webフォントのサービス

• Google Fonts
• TypeSquare
• FONTPLUS

を使用して表示させる方法です。

従来はWebサイトの本文のみにテキストデータのフォントがあ使われており、見出しやナビゲーションのフォントはPhotoshopやillustratorなどから画像データとして書き出して画像フォントで表示させているサイトが多くありました。

最近では、Webフォントで再現できるものについては、画像フォントではなくテキストデータで表示するようになっています。

現在はいろんな種類のWebフォントのサービスがあり、英語のフォントは無数に種類があります。日本語のフォントも英語ほどではないですが、増えてきてはいます。

他のフォントとの比較

次にWebフォントのメリットを説明します。

更新作業が簡単

Webサイトの情報を修正する際に、文字情報を変更するだけで、修正や更新作業が可能になります。

画像フォントの場合、デザインを作成してからWeb用に保存をして画像をアップロードし、HTMLを書き直す必要があります。

CSSで全体のフォントを一括で編集することができる

Webサイト全体のフォントのデザインをCSSの記述を変えることで、一括で書き換えることができるようになります。

ページの見出しのフォントを一括で変更したり、ナビゲーションのフォントを一括で変更することが可能になりま。

このようにCSSのみを変更するだけでデザインを変えることができるため、サイトリニューアルをする際にも簡単になります。

ブラウザ上での表示が綺麗

ユーザーによっては文字を大きくして読んだり、拡大したりする場合もあります。そのような時に画像が荒れることなく綺麗に表示させることが可能になります。

また、高解像度ディスプレイでも荒れずに美しく表示されます。

どのデバイスで見ても同じデザインで表示できる

Webフォントはユーザー側の閲覧環境に影響されないため、ユーザーがどのPCやスマホを使用していたとしてもWebサーバーからフォントのデータを引っ張ることができるため、ユーザーの端末の影響を受けることなくサイトに表示させることができます。

仮にWebフォントでないフォントをCSSで指定しまうとユーザーの端末にそのフォントがインストールされていなければデバイスフォントで表示されてしまいます。

検索エンジンに影響する

Webフォントだとテキストデータとして、検索エンジンに認識させることができるためSEO対策としてもWebフォントを使用することをおすすめします。

自動翻訳・音声読み上げに対応している

テキストデータで表示させることにより、ブラウザの自動翻訳や音声読み上げの機能に対応することができます。

そのような対応をしておくことで視覚障害者の方にも使いやすいサイトにすることが可能です。

次にWebフォントのデメリットを説明します。

画像フォントに比べると種類が少ない

世の中のすべてのフォントがWebフォントに対応しているわけではないため、選択肢は少なくなってしまいます。

---