今見えているサイトの文字、どうやって表示されているかご存知ですか？
突然ですが、普段当たり前に見ているWebサイト。
どうやってサイトの文字が表示されているか、ご存知でしょうか？
Webブラウザでサイトにアクセスすると、使用している端末（パソコン・スマートフォン等）にインストールされている「フォント」を呼び出し、文字を表示しているのです。端末にはたくさんのフォントがインストールされているので、どのフォントを呼び出すかという指示をすることができます。
では、指示したフォントが端末にインストールされていなかった場合はどうなるでしょうか。
その答えは、インストールされている中からフォントが自動的に選ばれて表示されてしまい、思ったような表示にならない、
ということになるのです。
この「インストールされているフォント」というのは、使用しているOS・インストールしているソフト・その国の言語などによって全く異なります。
それでは、フォントをどの端末で見ても同じ見た目にしたい場合はどうすればよいのでしょうか。
まずひとつは、フォントを画像にしてしまうという方法です。
画像はそのまま表示されるので、どの端末でも同じ見た目となります。
しかし、
「SEO的に問題がある（検索利便性の低下）」
「サイズの変更や文字の変更があった場合に画像を差し替える必要がある（変更容易性の低下）」
「レスポンシブの場合、綺麗に表示されない（可読性の低下）」
「自動翻訳や音声読み上げソフトが使用できない（Webアクセシビリティの低下）」
など、どれも回避策があるにはあるのですが、色々な問題点があります。
他の方法としては、Webフォントという手法があります。
サイトにアクセスした時に、フォントファイル自体をダウンロードさせてしまうというものです。
これなら端末にインストールされていないフォントも使えますし、どの端末で見ても同じ見た目になるのです。
もちろんこの方法にも欠点はあり、2バイトフォントの容量がとても大きかったり、高額な使用料が必要な場合があったりします。
英語圏で使用される1バイトフォントは、情報量が少ないために容量のデメリットがあまりありません。
これはWebフォントに向いていると言えます。
中国語や韓国語といった2バイトフォントは、たくさんの文字が含まれるために、とても重いファイルになりがちです。
英語圏では積極的にWebフォントを使用できます。
中国語や韓国語など2バイトフォントが中心となる地域で、速度を優先するのであれば標準フォントを選択するべきですし、
デザイン性を優先するのであれば、画像フォントか環境によってはWebフォントを選択します。
フォントの表示方式は、そのサイトのターゲット層の回線状況や、使用するフォントの容量も考えて
適切な方法を選択するようにしましょう。
S.I フロントエンドエンジニア
