abridge: Bug: can't seem to change the main font

OK, so in case your curious. I have completely figured out how to get lazy load of the fonts, and thus non blocking so the page renders right away.

What lighthouse complains about next is Content Layout Shift, the effect of the page shifting or reformatting from loading another font. With the Jost font this is particularly bad, and lighthouse marks it yellow instead of green, they allow for a little bit of CLS without marking it as an issue.

I believe the way to make certain fonts have less of a Content Layout Shift is by defining backup fonts that have similar character widths so that the page does not shift much when the font finally loads.

I took the time to load every single Zola Theme demo, and check for font resource load, every single theme that had fonts that load slow, as you originally pointed out, except for 4 of them. (Average 3G speed: 5,622 ms)

Here are the ones that did not have the delay and their respective Content Layout Shift:

Theme	DEMO	CLS
hallo	Demo	0.003 CLS
oceanic zen	Demo	0.005 CLS
zerm	Demo	0.026 CLS
dinkleberg	Demo	1.81 CLS

For Now I am going to commit these changes using the font declaration similar to hallo, the fonts on that page look good, and they have the least CLS, however we can add additional fonts with minimal CLS over time, we just have to find the other fonts that behave well.

P.S. Why did you get rid of the “local” src for font load? Did it not help load times?

Yeah, no problem. I am getting ready to commit the changes now, and yes I will probably just strategically pick fonts that most operating systems have as well so that I do not need to define custom fonts.

Doing this deep dive was still worth it though because I am sure this question would come up again and now we know all the details and can get it documented.

yeah, what I am doing now seems to work, I will push this up this evening, going to do a bit more testing first.

You could clone my blog and checkout the commit starting with 53f76 (a few commits back, before I removed it all)

I think the issue is because I loaded like 4 fonts IIRC.

( a bold font, italic font, regular font, source font )

It seems like they must be downloaded before the first paint of the page, which is why the first paint is so slow.

Without getting into the weeds so much, I really Abridge would benefit from having colors and fonts specified in the theme’s config.toml

main_font = "/path/to/font.woff2"
monospace_font = "/path/to/that.woff2"

color1 = "#00ff00"

If someone wants to do advanced things like set the backup fonts then they are on their own.

However, some reasons I’m suggesting this:

• It’s common enough people probably want to do this
• Sass is difficult to override locally (or I can’t figure out how to do it well), making choosing the font or colors require duplicating the theme into your own zola instance. This is annoying for most people.
• fonts_load and fonts probably doesn’t need to be 2 settings, since loading a font implies fonts_load is true
• By providing the main_font and monospace_font setting, we can do things like load the font asynchronously and change the page’s font on_load. This would be a super-convenience to users who don’t know the intricacies of this cruft, and unsuspectingly walk into a trap using the current method: