Based on codeAdrian/gatsby-omni-font-loader, fix Google fonts block rendering issue

I found codeAdrian/gatsby-omni-font-loader v2.0.2 caused PageSpeed complains that Google Fonts blocked rendering.

According to this article and this article (@codeAdrian's), I fixed generators/getFontConfig.tsx, components/AsyncFonts.tsx. The problem is gone.

So I decide to publish this package for my personal use.

In case you encountered the same issue, use my package this way:

1    npm i @nathanpate/gatsby-omni-font-loader react-helmet

The configuration in gatsby-config.js:

1{
2  /* Include plugin */
3  resolve: "@nathanpate/gatsby-omni-font-loader",
4
5  /* Plugin options */
6  options: {
7
8    /* Font loading mode */
9    mode: "async",
10
11    /* Enable font loading listener to handle FOUT */
12    enableListener: true,
13
14    /* Preconnect URL-s. This example is for Google Fonts */
15    preconnect: ["https://fonts.gstatic.com"],
16
17    /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
18    custom: [
19      {
20        /* Exact name of the font as defied in @font-face CSS rule */
21        name: ["Font Awesome 5 Brands", "Font Awesome 5 Free"],
22        /* Path to the font CSS file inside the "static" folder with @font-face definition */
23        file: "/fonts/fontAwesome/css/all.min.css",
24      },
25    ],
26
27    /* Web fonts. File link should point to font CSS file. */
28    web: [{
29        /* Exact name of the font as defied in @font-face CSS rule */
30        name: "Staatliches",
31        /* URL to the font CSS file with @font-face definition */
32        file: "https://fonts.googleapis.com/css2?family=Staatliches",
33      },
34    ],
35  },
36}

Credits

Original repo: codeAdrian/gatsby-omni-font-loader