Webサイトにお気に入りフリーフォントを取り入れよう: 使い方完全解説

ブログの魅力を引き立てる秘密の武器、それはお気に入りのフォント。今回は、フリーフォントのWebフォント化までの手順を詳しく解説。サブセット化や「unicode-range」の指定によるページ読み込みの軽量化で、読者に快適な閲覧体験を提供する方法もご紹介します。

words print metal letters font

フリーフォントをサイトに取り入れる手順
必要な文字だけを読み込む
- unicode-range
  - Unicodeの指定
おわりに

フリーフォントをサイトに取り入れる手順

①フォントをダウンロード

今回は、こちらのサイトから

fontfree.me

フリーフォント「やさしさアンチック」

こちらのフォントを選択しました。

www.fontna.com

②フォントを軽量化（サブセット）

欧米フォントに比べ、日本語フォントはひらがな、カタカナ、そして漢字と種類が多いため、ファイル容量が大きくなります。そのため、ダウンロードしたフォントファイルをWebフォントとしてそのまま使用すると、ページの読み込みがその分重くなってしまいます。

そこで、フォントを軽量化するために、「サブセット化」を行います。フォントのサブセット化とは、フォントデータから必要な文字データのみを抽出して、オリジナルのフォントデータにまとめ直すことです。サブセット化を行うことで、フォントデータが軽量化され、ウェブサイトの読み込みが高速化されます。

サブセットには、「サブセットフォントメーカー」というフリーソフトを使います。

opentype.jp

サブセットフォントメーカーの使い方

ダウンロードしたフォントファイル（.otf）を選択
作成後の保存場所・フォント名を指定
フォントに格納する文字を指定
- こちらからテキストをコピペして貼り付ける。（第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな）
作成終了後、そのままWOFFコンバータで作業を続ける場合にチェック
「作成開始」をクリック

※フォントに格納する文字を指定するときに「参照」からデータファイルを選択する場合は、エンコーディングを「UTF-8」に指定して保存したファイルを利用してください。文字化けなどでサブセット化に失敗することがあります。

失敗すると、変換されない文字があったりします。。

③WOFF形式に変換する

opentype.jp

そのままだとウェブ上で使えないので、ファイル形式を変換します。こちらも、おなじ武蔵システム社の変換用フリーソフト「WOFFコンバータ」を利用します。

WOFFコンバータ使用方法

WOFFコンバータの使い方

先ほどサブセット化したフォントファイル（.otf）を選択
空白のままでOK。※同じ場所に拡張子だけ変えて作成されます。
「WOFF2を作成する」にチェック。※WOFFより圧縮率が高いフォーマット。
「変換開始」をクリック

以上でサブセット化され、ウェブで使える形式のWOFF/WOFF2ファイルが作成されます。

④ファイルをアップロードする

Dropboxにアップロードして共有化します。

Dropboxで共有

DropBoxにWOFF/WOFF2ファイルをアップロード
www.dropbox.com
共有リンクをコピー
- アップロードしたファイルの「リンクをコピー」すると、以下のような構造のURLアドレスが、クリップボードにコピーされます。
  
  https://www.dropbox.com/ファイルへのアクセスパス/ファイル名.woff2?トークンキー&dl=0
コピーしたURLを修正
- ここで直リンクのアドレスに変えるため、以下のように URL を変更してください。
  1. コピーしたURLのwww.dropbox.comをdl.dropboxusercontent.comに置き換える。
  2. URLの末尾&dl=0を削除。
- 修正前
  https://www.dropbox.com/scl/fi/z78reh9q5x3pgjfu7penx/07YasashisaAntique-subset/ファイル名.woff2?rlkey=vl8cfuysog2m72inxx5pzf39c&dl=0
  修正後
  https://dl.dropboxusercontent.com/scl/fi/z78reh9q5x3pgjfu7penx/ファイル名.woff2?rlkey=vl8cfuysog2m72inxx5pzf39c
CSSで共有

@font-face {
  /* font-familyの名前をここで任意に指定 */
  font-family:'YasashisaAntique';
  /* 変更後のリンクアドレスをurl()内に記述 */
  src:url(https://dl.dropboxusercontent.com/scl/fi/z78reh9q5x3pgjfu7penx/07YasashisaAntique-subset.woff2?rlkey=vl8cfuysog2m72inxx5pzf39c) format('woff2');
  font-display:swap;
}

* {
font-family: 'YasashisaAntique',serif;
}

必要な文字だけを読み込む

unicode-range

Unicode とは、世界の様々な言語、書式、記号に、番号を割り当てて定義した標準の文字コードです。 developer.mozilla.org

Googleフォントの場合、読み込みリンクに&text=というパラメータを追加すると、指定した文字だけを読み込むことができます。

<link href="https://fonts.googleapis.com/css?family=Kaisei+Decol&display=swap
&text=秋の青空白雲" 
rel="stylesheet">

<p class="kaisei-select">
水たまりには、秋の青空が写って、白い雲がゆるやかに流れている。
</p>

「水たまりには、秋の青空が写って、白い雲がゆるやかに流れている。」

―「きりぎりす」太宰治

unicode-rangeプロパティを使うことにより、自身で共有化したWebフォントでもこれと同様のことができます。

@font-face { 
  font-family:'Togalite-Bold';
  src:url(https://dl.dropboxusercontent.com/scl/fi/tkqrn524gzepx3d01sg2u/Togalite-Bold-subset.woff2?rlkey=9rzl4ylxdb9zwknqlev64zgef) format('woff2');font-display:swap;
  /* 「秋の青空白雲」の各文字のUnicode */
  unicode-range: U+79CB, U+306E, U+9752, U+7A7A, U+767D, U+96F2;
}

.togalite-select {
  font-family: 'Togalite-Bold';
}

<p class="togalite-select">
水たまりには、秋の青空が写って、白い雲がゆるやかに流れている。
</p>

「水たまりには、秋の青空が写って、白い雲がゆるやかに流れている。」

読み込むフォントを指定して必要のないデータを読み込まないことで、データ取得にかかる時間を最小限に抑えます。

Unicodeの指定

Wikipedia:Unicode

	コード範囲
アルファベット	`U+0021-007A`
ひらがな	`U+3040-309F`
カタカナ	`U+30A0-30FF`
漢字	`U+4E00-9FFF`

おわりに

まとめ： お気に入りのフォントをWebサイトに取り入れる手順は、以下の通りです。

フォントをダウンロード： フリーフォントサイトから好みのフォントをダウンロードします。
フォントを軽量化（サブセット）： フォントデータから必要な文字データのみを抽出し、ウェブサイトの読み込みを高速化するためにサブセット化を行います。
WOFF形式に変換する： サブセット化されたフォントをWOFF形式に変換し、ウェブ上で使用可能な形式にします。
ファイルをアップロード： 変換されたフォントファイルをDropboxなどにアップロードして共有リンクを取得します。
CSSで共有： 取得した共有リンクをCSSに組み込み、Webサイトで利用可能にします。
必要な文字だけを読み込む（unicode-range）： 文字の必要な範囲を指定して、データ取得時間を最小限に抑えます。

これらの手順を追うことで、Webサイトにお気に入りのフォントを取り入れ、読者に快適で魅力的な閲覧体験を提供することができます。フォントの個性がサイトの印象を引き立て、ユーザーにとって特別な雰囲気を醸し出すことでしょう。

slow-cafe-note.blogspot.com

/ 目次：表示非表示ボタン /