みなさんはWebフォントを利用していますでしょうか？
外部から読み込むと、ページの読み込み速度を下げてしまう可能性があります。
当ブログではGoogle Fontsをサーバーにアップロード、使うものだけを限定して読み込んでいます。
今回はWebフォントをローカル(内部)にアップロードして読み込む方法を解説します。
カスタマイズをした例/大まかな流れ
当サイトのブログタイトルと一部ページのタイトルに使用しています。
使う文字のみを選んで使っています。
実際にやってみよう
フォントをダウンロード
まずは使いたいフォントをダウンロードしましょう。GoogleFontsにアクセスして好きなフォントを選びます。
今回はNoto Sans Japaneseをダウンロードします。
右上のDownload Familyを押してダウンロードします。
ダウンロードできたら解凍しておきましょう。
このようなフォントファイルが入っていればダウンロードは完了です。
フォントをサブセット化＆変換
使う文字だけを使えるようにするサブセット化と、Webフォントとして使うためwoff(woff2)に変換していきます。(スキップしてOK)
まずは以下2つのソフトをインストールします。
2つのソフトがインストールできたら、まずサブセットフォントメーカーを起動します。
左下にあるWindowsメニューから探すと見つかるはずです。
もしくは検索ボタンから探すといいでしょう。
作成元フォントファイル先ほどダウンロードしたフォントを選択します。
作成後フォントファイル先ほどとは別のファイル名にするのがおすすめです。
フォントに格納する文字使いたい文字を入力します。JIS第1水準の漢字はこちらが参考になります。
作成終了後、WOFFコンバータを起動するこの後変換するのでチェックを入れておきます。
変換前フォント先ほどのフォントを選択します(変更する必要はありません)
WOFF2を作成する圧縮率が高いためwoff2を作るとよいでしょう。
これでファイルができました。
フォントを読み込み
フォントをアップロードしてからCSSで読み込みする記述を書きます。
WOFF2はInternet Explorerに対応していないため両方のファイルを記述しています。
上記ソフトで変換せず、ttfファイルでも問題ありませんが、woff2に変換したほうが読み込み速度は早いかもしれませんね。
@font-face {
font-family: "Noto Sans JP";
src: url("/fonts/NotoSansJP-Medium-mini.woff2") format("woff2"),
url("/fonts/NotoSansJP-Medium-mini.woff") format("woff");
font-display: swap;
}また上記例では、Page Insightsなどで表示される、ウェブフォント読み込み中のテキストの表示の対策としてfont-display: swap;を付記しています。
不要な場合は消してください。
まとめ
今回はWebフォントをダウンロードして、自分のサーバーに設置して読み込む方法を解説しました。
Webフォントの使いすぎはサイトを重くしてしまうので要注意です！
今回はここまで。
( *´꒳`*)੭⁾⁾
