【質問】どの端末でも同じフォントで表示させる方法はありますか？
今週の質問と回答
【Ｑ】
弊社のWebサイト、デザイン性を重視し表示される
文字の書体にまでこだわって制作してもらったん
ですが、表示させる端末によって、文字の見え方
が異なります。制作会社に確認をしたところ、端末
のOSやOSのバージョンにより利用可能なフォント
が異なるのでどうしようもない、という回答でし
た。
デザインにこだわりつつ、どの端末でも同じ書体
で表示させる良い方法はないものでしょうか？
─────────────────────
【Ａ】
「Webフォント」を利用して、Webページの文字の
書体を設定すると、どの端末でも同じ書体で表示
させることが出来ます。これまではページの読み
込み速度が遅くなる懸念があり、利用されること
は多くありませんでしたが、最近では技術の向上
により「Webフォント」を利用しているサイトが
増えてきています。
─────────────────────
→「Webフォント」の説明に入る前に、Webページ
のテキストデータがブラウザで表示される際、
どのフォント（書体）が適用されるのかについ
て、順を追って説明をしていきます。
→まず、Webサイト側でテキストデータに対して
表示用のフォントを指定していない場合は、
ブラウザ側で設定されている”標準フォント”が
適用され表示されます。この場合、Chromeや
Internet Explorer、Safariなど、ブラウザの
種類によってデフォルトで設定されている
”標準フォント”が異なる為、テキスト部分の
表示のされ方はブラウザによって異なる、とい
うことになります。
加えて、ブラウザによっては”標準フォント”を
変更することが可能なものがありますので、
閲覧者側でブラウザの標準フォントの設定を
変更している場合、同じブラウザであっても
表示のされ方が異なる、ということになります。
→これを避ける為に、通常はWebサイト側におい
てテキストデータに対する表示用のフォントを
指定しておきます。
CSSと呼ばれる、Webページのスタイルを指定す
る為の言語上で、サイト単位やページ単位で表
示用のフォントを指定したり、特定の文字列や
文章に対して表示用のフォントをhtml上で指定
したりします。
しかし、各端末のOS（Windows、MacOS、Android、
iOSなど）やOSのバージョンによって、ブラウザ
で使用可能なフォントの種類が異なりますので、
どの端末でも全く同じフォントを使って表示さ
せるという事がなかなか出来ません。その為、
実際は各端末用に類似するフォントをまとめて
”font-family”として設定することによって、
各OS毎の違いを出来るだけ無くすようにします。
それでも、全く同じ表示にするということは
やはり困難です。
→どうしても各端末（OS)での表示の違いを無くし
たい場合は、文字列や文章を画像化して表示さ
せるという対応を行うことが多いです。この
場合、画像データとしての表示となりますので、
端末やブラウザの影響を受けずに同一の書体で
表示されることになります。一方で、テキスト
データではないことから、検索エンジンに内容
が読み取られずSEO的に不利である、といった点
や、修正や内容の追加の際に手間がかかる、と
いった点がデメリットとして生じます。
→こういったデメリットを解消しつつ、端末に
よる表示の違いを無くす技術として、最近では
「Webフォント」が使用されることが多くなって
きています。「Webフォント」とは、端末側で
持っているフォントデータではなく、サーバー側
で用意したフォントデータをWebページのデータ
と同時にダウンロードして、ブラウザ上で文字
表示をさせる技術です。フォントデータ自体を
ダウンロードして表示させますので、端末の違い
に影響を受けることなく、同一のフォントで文字
を表示させることが可能となります。
→「Webフォント」では、フォントデータをダウン
ロードさせることから、ページの読み込み速度が
遅くなってしまうデメリットが想定され、特に
日本語のように文字の種類が多い言語での利用
はこれまでは多くありませんでした。しかし、
「サブセット化」と呼ばれる、Webサイトで利用
されることの多い一部の文字データのみをダウン
ロードさせる方法を用いることで、フォント
データの容量の問題が軽減されることから、
最近では「Webフォント」の利用が多くなって
来ています。
→Google Fontsなど、無料で利用可能な日本語の
「Webフォント」もありますので、デザイン性に
凝ったWebサイトを構築したい、という場合は、
「Webフォント」の利用を検討してみてはいかが
でしょうか？
■今回の授業の先生のプロフィール
──────────────────────────
WEB活認定コンサルタント
松本 年史（まつもと としふみ）
▼プロフィール・経歴
約15年間にわたり、主に外資系IT企業において
新規開拓営業に従事した後、経営コンサルタント
として独立。
独立前の10年間は、データ分析ソフトウェア（BI
/BA)の導入を通じて、顧客企業の意思決定シス
テムやマーケティング自動化システムの構築支援
を行う。
独立後は、ITコーディネータ/中小企業診断士と
して中小企業を中心にコンサルティングを提供。
Webマーケティングを含むマーケティング戦略の
立案から営業支援まで、顧客企業の売上拡大に
向けた取組みを幅広く支援している。
無料メルマガ「WEB活用の教科書」購読申し込み
お名前とメールアドレスと入力して[無料メルマガを購読する]をクリックすると、中小企業～個人事業主がWEBを活用してビジネスを展開するために必要なノウハウをお届けする無料メルマガ【WEB活用の教科書】を毎週水曜日にお届けいたします。いつでも配信解除ができますので、お気軽にご購読ください。
