ブログ

日本のフォントメーカー、NIS Fontの公式ブログです。 NIS Fontは、DTP用フォントや高品位フォントを開発し、Windows、Macintosh向けの書体販売やメーカーへのOEM提供など、幅広い業態で使用されています。

【フォント活用術】Webページでフォントを使う!

Webデザイナーさん等には当たり前の内容だとは思いますが…、
今回は、Webページでフォントデータを扱う方法についてです。

Webページでフォントを使用する場合、CSSなどでフォントを指定するだけでは、Webページを表示する側の端末(PCやスマフォなど)に、指定されたフォントが存在しない場合、別のフォントへ置き換えられてしまいます。

明朝体、ゴシック体などは、端末のシステムフォントとして元から組み込まれている場合が多いので、明朝、ゴシックの指定くらいは出来ますが、端末によってフォントのデザインや仕様が異なるので(WindowsとMacintoshなどは特に)、Webページのデザインやイメージも、意図したものになるとは限りません。

そこで、下記のような方法があります。

1.画像データとして配置する

画像編集ソフト(PhotoshopやIllustratorなど)で作成したデザインを、JPGやGIFなどの画像形式にしてしまえば、フォントのデザインが崩れることはありません。
Webページにそのまま貼ってしまえばOK。

欠点としては、画像として書き出してしまうので「文字情報」が失われてしまい、Web検索の対象から外れてしまいます。

端的に表現すると、SEOに対して弱いです。

また、修正や編集などの作業も、画像編集ソフトを介して行わなければならないので、手間が掛かったり、画像データはテキストデータよりデータ容量が大きいため、Webページの表示速度が遅くなる可能性もあります。

2.Webフォントを使用する

フォントをWebサーバー上に持たせてしまうことで、表示先の環境に左右されずに、意図したフォントでの表示が可能になります。

ただし、Webページを表示するWebブラウザが、Webフォントをサポートしていない場合は無効になります。
また、フォントベンダーによって、利用規約が関わってくるので、注意が必要です。

Webフォントを使用する方法も、大きく分けて二つあります。

1) Webフォント形式のデータを、サーバー上にアップロードする

WebフォントはCSS3からサポートされている機能ですので、CSS3をサポートしているブラウザであれば、Webサーバー上にWebフォントのデータをアップロードしてしまえば、CSSで定義して呼び出すことが可能です。

※NISFontでは、Webフォントでの使用は「二次使用契約」になるため、別途契約が必要になります。

2) Webフォント提供サービスを利用する

サービス運営会社が契約を結んでいるフォントベンダーのフォントを、Webフォントとして利用できるサービスです。
月次、年次契約など、有料の場合が多いですが、一定額で複数の書体を利用出来る利点があります。

サービスによって使用できるフォントが決まってしまうので、フォントを選ぶ自由度は若干落ちてしまうのが欠点でしょうか。

※二次利用の契約や料金については、Webフォントサービスの利用料金に含まれている場合が殆どだと思います。

Webページ上でフォントを使用する方法はいろいろありますが、用途に合った方法を選びましょう!

◆◆NISFontのLINEスタンプも販売中!◆◆

NISFontのLINEスタンプも引き続き販売中です!
宜しくお願い致します。

◇NISFontのLINEスタンプ第1弾「サムシング・サム」
【購入ページURL】http://line.me/S/sticker/1152940

 

◇NISFontのLINEスタンプ第2弾「社会人の惰性」
【購入ページURL】http://line.me/S/sticker/1155207

 

宜しくお願い致しますm(_ _)m

Copyright (C) 2017-2024 NISFont. All Rights Reserved.