閲覧環境に左右されない？WebフォントがデザインとSEOを両立する仕組み

Webフォントの基本！ フォントのデザインはどうやってサイトに表示されている？

【レイアウト- フォント】「Webフォント」

Webページに埋め込まれたフォントで、訪問者のデバイスにインストールされていないフォントを、Webサイト上で 表示できるようになります。

システムフォントの場合

フォントがないと、各デバイスに入っているフォントに置き換わってしまう。

Webフォントの場合

サーバーからフォントを読みこみ、正しく表示される。

【POINT】
Webフォントを使用することにより、デザイン性を向上させ、
ブランディングを保ちながら検索エンジンにも引っかかるように。

【レイアウト- フォント】「フォントの埋め込み」

作成した文書やファイルに、フォント情報をデータに一緒にもたせること。

埋め込みがある場合とない場合

メリット

・フォントの置き換えや文字化けを防ぐことができる
・意図したデザインを再現できる
・ファイルを開く側のシステムにフォントがなくても、オリジナル通りに表示・印刷できる

注意点

・ファイルサイズが大きくなる
・フォントのライセンスで埋め込みが許諾されている必要がある
・フォントのバージョンは埋め込まれたときのものになるため、更新があった場合反映されない

【POINT】
フォントの埋め込みは入稿時に指定された場合や一時的なものとして扱い、
必ず元データはもっておきましょう。
また、修正がある場合も元データから行い、修正できるように元データを残しておきましょう。

【出典】『瞬解！ デザイン用語図鑑』著：ingectar-e