gan0803.dev

GatsbyJSで作ったブログのフォントをUDフォントに変更（Miguフォント）

公開日: 2020年05月27日最終更新日: 2022年01月28日

gatsby-theme-blogのフォントを好みのものに変えたいです。
最近だとユニバーサルデザインフォントが見やすくて良いと思います。
AndroidのデフォルトフォントになっているRobotoも好きなんですけどね。

まずはフリーのUDフォントに何があるか調べました。

MORISAWA BIZ+のBIZ UDゴシック / 明朝はライセンスを見るとサーバーに置くのが禁止されていたので使えません。残念です。

Windows10にはモリサワのUDデジタル教科書体がデフォルトで入っています。Windows10のクライアントに限ってはクライアント側にあるこのフォントを指定するのも選択肢に入りそうです。

Miguフォントというものが見つかりましたM+フォントとIPAフォントを合成していて良さそうです。

今回はMiguフォントをローカルフォントとしてサーバーにおいて使うことにしました。とりあえずそのままサーバーに置いて@font-faceで指定しました。

@font-face {
    font-family: "migu-1c";
    src: url("./migu-1c-regular.ttf");
}

読み込みが遅い、文字が見えない瞬間があってちらつく、WindowsのChromeだとジャギが目立つ、とひどい状況になりました。

GoogleがLighthouseというWEBページ最適化のための監査ツールを用意しています。Lighthouseのレポート結果を見ながら修正していきます。

フォントのファイルが3MB以上ありました。これはダウンロードに時間がかかりますね。
調べてみると必要な文字だけに絞ると軽くできることがわかったため、JIS第一水準のサブセットを作ることにします。
また、woffはttfよりサイズが2割ほど小さくなるのでttfからwoffへの変換も同時に行います。
サブセット化してwoff形式に変換したMiguフォントのサイズは489KBになりました。
この作業にあたっては以下をありがたく利用しました。

文字が見えない瞬間があるのは、フォントがロードされていない場合に不可視の代替文字を描画するためでした。
font-display: swap;を@font-faceに指定することでロードするまでは大体のテキストで描画することができます。フォントのロードが終わると置き換えられます。

調べた結果@font-faceを以下のように修正しました。

@font-face {
    font-family: "migu-1c";
    font-style: normal;
    font-weight: 400;
    src: url("./migu-1c-regular-jis1.woff");
    font-display: swap;
}

"src/fonts"に上記を"font.css"として配置し、同じディレクトリに"migu-1c-regular-jis1.woff"を置いています。 "src/gatsby-plugin-theme-ui/index.js"を以下のようにするとフォントを設定することができます。

import merge from "deepmerge"
import baseTheme from 'gatsby-theme-blog/src/gatsby-plugin-theme-ui'
import '../fonts/fonts.css'

export default merge(baseTheme, {
    fonts: {
        body: "migu-1c,'Roboto'",
        heading: "migu-1c,'Roboto'",
    },
})

読み込みも早くなり、チラツキもなくなりました。 フォントを変換して出力したものに置き換えたらジャギもなくなっていました。変換の過程でどうなったのか気になります。

フォントについてはウェブフォントの最適化に情報がまとまっています。

普段何気なく見ているWEBページに様々な最適化が施されていることが、フォントの最適化を通して垣間見えました。面白いです。

Tags: GatsbyJS
©︎2021 gan0803.dev