feat: try fontaine

[johnnyreilly]

Try out @danielroe's Fontaine: https://github.com/unjs/fontaine

If it works out I'd be happy to contribute Docusaurus usage docs to the project as per unjs/fontaine#7

Baseline

Here's my blog in mobile mode right now (to be clear; this is live - the baseline):

I've added Fontaine

I'm using Docusaurus and I'm kind of guessing what implementation should be; I could be have a borked approach.

When I browse to https://thankful-sky-0bfc7e803-305.westeurope.1.azurestaticapps.net/ it doesn't seem to work. Probably doing something wrong. It looks like this:

According to the Lighthouse report:

Cumulative Layout Shift
0.019

Why do I think it doesn't work?

Well essentially it's the word width thing. On the first line we either see:

Fallback font: "Bicep: Static Web Apps" [four words on one line]

OR

Custom font (Poppins): "Bicep: Static Web" [three words on one line]

I would expect the fallback font to also be displaying "Bicep: Static Web"; fitting the same amount on a single line.

So maybe I'm doing something wrong.

Things I could be doing wrong

• I'm using Docusaurus and I've implemented this using a custom plugin. I think this is probably the correct pattern - but I've invented this just now; as there isn't a "docusaurus way" documented
• I host my fonts on my site, I don't load them from a CDN. I also preload them with a webpack plugin. I'm unsure if this is something that plays well with Fontaine - the docs seem to talk more about loading from a CDN. Not sure.
• I'm doing this to resolve fonts: resolvePath: (id) => '../fonts/' + id, . Not sure if this is correct, I copy pasted from custom.css. There you'll see code like this: src: url('../fonts/Poppins-Regular.ttf'); - which made me thinkI needed to specify ../fonts/ for each font. Is this right? Dunno. No errors in the console that I can see. Unsure how to debug.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-sky-0bfc7e803-305.westeurope.1.azurestaticapps.net

[github-actions]

⚡️🏠 Lighthouse report

We ran Lighthouse against the changes and produced this report. Here's the summary:

Category	Score
🔴 Performance	47
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	98
🟢 PWA	100

Lighthouse ran against https://thankful-sky-0bfc7e803-305.westeurope.1.azurestaticapps.net/

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-sky-0bfc7e803-305.westeurope.1.azurestaticapps.net

[johnnyreilly]

I think it might work! (it's all on the same line)

Cumulative Layout Shift: 0