{
"$type": "site.standard.document",
"canonicalUrl": "https://johnnyreilly.com/posts/preload-fonts-with-docusaurus",
"description": "Improve website performance by preloading web fonts in Docusaurus using `webpack-font-preload-plugin` or `headTags` API, as described in this tutorial.",
"path": "/posts/preload-fonts-with-docusaurus",
"publishedAt": "2021-12-29T00:00:00.000Z",
"site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
"tags": [
"docusaurus",
"webpack"
],
"textContent": "When we're using custom fonts in our websites, it's good practice to preload the fonts to minimise the flash of unstyled text. This post shows how to achieve this with Docusaurus.\n\n\n\nIt does so by building a Docusaurus plugin which makes use of Satyendra Singh's excellent webpack-font-preload-plugin.\n\nUpdated 03/11/2022: Subsequently this post demonstrates how to achieve font preloading directly, by using the the headTags API.\n\nPreload web fonts with Docusaurus\n\nTo quote the docs of the webpack-font-preload-plugin:\n\n> The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance.\n>\n> This plugin specifically targets fonts used with the application which are bundled using webpack. The plugin would add <link> tags in the begining of <head> of your html:\n>\n> \n\nIf you want to learn more about preloading web fonts, it's also worth reading this excellent article.\n\nThe blog you're reading is built with Docusaurus. Our mission: for the HTML our Docusaurus build pumps out to feature preload link elements. Something like this:\n\nThis link element has the rel=\"preload\" attribute set, which triggers font preloading.\n\nBut the thing to take from the above text is that the filename features a hash in the name. This demonstrates that the font is being pumped through the Docusaurus build, which is powered by webpack. So we need some webpack whispering to get font preloading going.\n\nMaking a plugin\n\nWe're going to make a minimal Docusaurus plugin using webpack-font-preload-plugin. Let's add it to our project:\n\nNow in the docusaurus.config.js we can create our minimal plugin:\n\nIt's a super simple plugin, it does nothing more than new up an instance of the webpack plugin, inside the context of the configureWebpack method. That's all that's required.\n\nWith this in place we're now seeing the <link rel=\"preload\" ... /> elements being included in the HTML pumped out of our Docusaurus build. This means we have font preloading working:\n\nHuzzah!\n\nUsing the headTags API\n\nIf you're using Docusaurus 2.2 or greater you can use the new headTags API and bypass using an extra dependency entirely.\n\nTo make this work, we need to ensure that our fonts live in the static directory which is reliably addressable - not hashed by webpack. We can then use the headTags API to add the link elements to the head of the HTML:\n\nIn our custom.css we need to add the following:\n\nNote that the urls are fully qualified to prevent webpack from trying to bundle them. Another bonus of using the static folder is that we can apply long term caching. I'm using Azure Static Web Apps to run my site and so I'm achieving this with the following in staticwebapp.config.json:\n\nThings to note from the above:\n\n- Access-Control-Allow-Origin and Vary are in place to allow my staging sites to access the fonts from the production site. Without this, the fonts won't load in the staging site.\n- The img and fonts directories sit under the static directory. For those directories we're going to use cache-control set to 6 months for the fonts and static images. They rarely change and so this is an appropriate strategy.\n\nThis blog post was migrated to the headTags API approach with the release of Docusaurus 2.2.0. You can see the PR here.",
"title": "Preload fonts with Docusaurus (updated 03/11/2022)"
}