【いまさら聞けない】 Webフォントとは?-その3- しくみと使い方

こんにちは(^ ^) FONTPLUSスタッフのナオです。
3回目となる「【いまさら聞けない】Webフォントとは?」。 今回はWebフォントのしくみと使い方について、ご紹介します。

過去2回の記事はこちら
【いまさら聞けない】 Webフォントとは?-その1
【いまさら聞けない】 Webフォントとは?-その2- メリット

Webフォントのしくみ

どうやってフォントを表示させているのか? デバイスフォントと比較してみました。

デバイスフォントとWebフォントの比較図

上の図の、フォントファイルがおいてある場所にご注目ください。
デバイスフォントは、パソコンやスマートフォン(デバイス)に入っているフォントです。 入っているフォントしか使えないので、デバイスによって違うフォントで表示されることがあります。 一方Webフォントは、サーバーにフォントファイルがあるので、インターネットがつながる環境なら、どんなデバイスでも同じフォントで表示できます。

※上記の[Webフォント]の図では、便宜上HTML/CSSとフォントのファイルを一緒のサーバーにまとめていますが、それぞれのファイルが異なるサーバーに配置されているケースもあります。

Webフォントの使い方 (自分で設定する場合)

じゃあ、Webフォントの使い方は? 自分で設定する場合は、次の3つの作業が必要です。

  1. フォントファイルをサーバーへ配置する。
  2. CSS @font-face でフォントファイルを指定する。
  3. CSS font-family でフォント名を指定する。
ちなみに

Webフォントサービス(FONTPLUS)を使えば、こうなります。

  1. フォントファイルをサーバーへ配置する。 ⇒ 不要
  2. CSS @font-face でフォントファイルを指定する。 ⇒不要(自動設定)
  3. CSS font-family でフォント名を指定する。 ⇒必要

自分では設定しないよ〜という方は「Webフォントサービス」へ飛んじゃってください♪

1.フォントファイルをサーバーへ配置する。

使いたいフォントのファイルを作成し、サーバーへおきます。
ここで注意したいのは、ブラウザによって対応しているフォントファイルの形式が異なるということ。 そのため、1つのフォントをいくつもの形式(eot、woff、ttf、otf、svg)に変換し、ファイルを用意する必要があります。

2.CSS @font-face でフォントファイルを指定する。

1.で配置したフォントの場所と名前を、CSSの@font-faceで指定します。
ブラウザによって対応しているフォントファイルの形式が異なるため、複数のフォント形式をそれぞれ記述する必要があります。

3.CSS font-family でフォント名を指定する。

CSSのfont-familyで使いたいフォント名を指定します。 これはWebフォントに限らずフォントを指定したい時には必ずおこないます。

 

 
以上3つの作業でWebフォントが使えます。
いろんなフォントを使いたい時は、フォント毎に作業が必要なので、結構手間がかかりますね。。

Webフォントサービス

Webフォントを快適に使ってもらえるように開発された、Webフォントサービス。
FONTPLUSのWebフォントサービスを使えば、フォントファイルを形式毎に1つずつ変換作成して、サーバーにおいたり、@font-face に記述する必要がありません。

さらに! 

Webページで使う文字のみを抽出したフォントファイルを作成して配信するので、データ容量が軽くなり、フォント表示がスムーズになります。 (フルセットの日本語フォントは、ひらがな、カタカナ、漢字などたくさんの文字が入っているので重い=読み込みに時間がかかるんです。)
FONTPLUSで最も使われていて、使い方が簡単なスマートライセンスをご紹介します。

スマートライセンスのしくみ

スマートライセンスのフォント配信のしくみ
HTMLにあらかじめ、プログラムを実行するための「scriptタグ」を記述しておきます。 すると、Webページを開いた時にプログラムが動きブラウザ上で①Webページの内容を解析します。 解析結果をもとに、FONTPLUSにあるフルセットのフォントファイルから、②使う文字だけを抽出したフォントファイルを作成(サブセット化)します。 サブセット化により③軽量化したフォントをブラウザに配信し、Webページで文字を表示します。
この一連の作業をリアルタイムで自動的におこなえることが、スマートライセンスの特徴です。

スマートライセンスの使い方

スマートライセンスの使い方はこちらの3ステップ。

  1. FONTPLUSへWebページのURLを登録。 (所要時間:1分)
  2. 専用のscriptタグをHTMLに貼り付ける。 (所要時間:1分)
  3. CSS font-family でフォント名を指定する。 (所要時間:1分)

あっという間にセッティング完了です!   →使い方の詳細はこちらへ。
フォントを変えたい時は3.でフォント名を指定し直すだけ。 いろんなフォントを試したいときにも便利です。

FONTPLUSには、無料トライアルもありますので、よかったら試してみてください♪

ではまた〜(^ ^)/