【2023】簡単！フォントをWebフォント化する方法とツール

フォントをWebフォント化してサイトを高速化する

Webフォントはサイズが大きく、かつ外部サーバから読み込む為、読み込みに時間がかかりサイトスピードを低下させる原因の一つです。

そこでWebフォントを自分のサーバへ配置し、そこから読み込ませることによりサイトスピードの向上を測ります。

手順

※フォントはWebフォント化して良いライセンスとそうで無いライセンスがある為、事前にWebフォント化したいフォントのライセンス情報を確認してください

①フォントをサブセット化する

サブセット化→使用しない文字や漢字を取り除き、ファイルをコンパクト・軽量化にします。

サブセットフォントメーカー

こちらのソフトでフォントのサブセット化を行うことができます。必要無い方は飛ばして大丈夫です。

【2023】簡単！フォントをWebフォント化する方法とツール

フォントをWebフォント化してサイトを高速化する Webフォントはサイズが大きく、かつ外部サーバから読み込む為、読み込みに時間がかかりサイト…

②サブセット化したフォントをWOFF形式に変換

現状フォントファイルはotf、ttf形式かと思いますが、これらはパソコン上でインストールして表示するローカルの形式のため、Web上で表示する為のwoff、woff2ファイルに変換します。

woff、woff2の他、.eot形式もありますがIE4～IE9以下に対応する場合の形式なのでwoff、woff2のみで良いかと思います。

オンラインでWOFF形式に変換できるツール

③サーバにアップ、スタイルでfontfamilyを設定

/assets/fonts/フォント名-太さ.woff、/assets/fonts/フォント名-太さ.woff2

のような名前でフォントファイルをサイトファイル内に格納し、style.cssにフォントを読み込む記述を追加します。url等は適宜変えてください。

@font-face {
  font-family: "font1";
  src: url("../fonts/font1-regular.woff2") format("woff2"),
  url("../fonts/font1-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "font1";
  src: url("../fonts/font1-bold.woff2") format("woff2"),
  url("../fonts/font1-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "font2";
  src: url("../fonts/font2_regular.woff2") format("woff2"),
  url("../fonts/font2_regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

こんな漢字で読み込みたいフォントと太さ分@font-faceをstyle.cssに記述してください。

body, html { font-family: 'font1', sans-serif;
 font-weight: normal;
}

body,htmlへさっき追加したフォントをfont-familyに設定すると、サイト全体にフォントが適用されるかと思います。