Changing the font of a blog created in GatsbyJS to a UD font (Migu font)

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

I would like to change the font on gatsby-theme-blog to one of my preference.
These days, I think the universal design font is easier to read.
I also like Roboto, which is the default font for Android.

First, I looked at what's available in free UD fonts.

MORISAWA BIZ+ BIZ UD Gothic / Mincho can't be used because if you look at the license, it was forbidden to put it on the server. It's a pity.

Windows 10 comes with Morisawa's UD digital textbook font by default, and for Windows 10 clients, specifying this font on the client side may be an option.

I found something called Migu font, which is a combination of the M+ and IPA fonts and looks good.

This time I decided to use the Migu font as a local font on the server. I put it on the server and specified it with @font-face.

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

The loading was slow, there were moments when I couldn't see the text and it flickered, and the jaggies were obvious in Chrome on Windows, which was terrible.

Google has a web page optimization audit tool called Lighthouse, and we'll go through the results of the Lighthouse report and make changes.

The font file was over 3MB. This will take some time to download.
I found out that I can make it lighter by limiting it to only necessary characters, so I decided to make a subset of JIS first level.
Also, woff is 20% smaller than ttf, so I'll convert from ttf to woff at the same time.
The size of the subset converted to woff format is 489KB.
I used the following tools for this work.

• subset font maker
• WOFF Converter
• List of reference strings for subsetting Japanese web fonts

The reason for the invisible moment was to draw an invisible alternative character when the font was not loaded.
You can use font-display: swap; as @font-face to draw most of the text until the font is loaded. When the font is finished loading, it is replaced.

After checking, I modified @font-face as follows.

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

The above is placed in "src/fonts" as "font.css", and "migu-1c-regular-jis1.woff" is placed in the same directory. You can configure the font in "src/gatsby-plugin-theme-ui/index.js" as follows.

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'",
    },
})

It loaded faster and the flickering was gone. I replaced the font with the converted output and the jaggies were gone. I'm curious to see what happened during the conversion process.

You can find information about fonts in Optimize WebFonts.

Through font optimization, I got a glimpse of the various optimizations that have been made to the web pages that I usually look at without thinking about it. It's interesting.