Difficulty customising the font stack cleanly

[stekershaw]

System information

Zola version: 0.19.2
Tabi: main branch (e519864)

Expected behaviour

I was trying to add a stylesheet to use this system font stack (using only system-local fonts) for rendering code blocks:

font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

On my MacBook using Chrome I expected this to render code blocks using Menlo as that is the first font family installed locally on my Mac.

Actual behaviour

Code blocks used the subset of Cascadia Code that ships with tabi (#174).

This was then hard to prevent (or had undesirable features):

• Deleting the font file results in Menlo as expected, but there is then a 404 trying to download the font.
• Trying to override the appropriate @font-face rule can help the desired font being used but can still lead to the font being downloaded (or a 404 if deleted), because it seems the @font-face at-rules are not evaluated like the usual CSS cascade for normal rules and the order/speed of stylesheet download can affect which sources are checked.

It could be made to work as expected on a Mac by reordering the font stack so that Cascadia Code comes later, which works for me but there is a chance that others may hit this issue or similar. There a a couple of other options too, but they have peculiarities too.

Also, on Windows with the font family present locally the italic font is never used, rather the italics are faked with the usual slanting of the regular font. This could be addressed in a couple of ways.

Steps to reproduce

1. config.toml:

compile_sass = true

[extra]
skin = "custom"

2. sass/skins/custom.scss including:

:root {
    --code-font: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

3. Check the font used for a code block and see:

• With Cascadia Code installed locally (e.g Win11): system-local Cascadia Code is used
• Otherwise, e.g. on a Mac as default: downloaded Cascadia Code (theme subsetted font) is used
  • The expected behaviour would be to see Menlo in Chrome - this is what happens if not using tabi

Additional context

I'll raise a PR with a suggested fix. If tabi used a font family name like Cascadia Code subset then that leaves Cascadia Code to work as expected.

Final checklist

• I've checked that the issue isn't already reported.
• I've tested with the latest version of tabi to check if the issue has already been fixed.

[welpo]

Thanks for reporting this!

As far as I understand, the problem with using Cascadia Code subset is that it will force downloading the remote font, even if the user does have Cascadia Code installed.

It could be made to work as expected on a Mac by reordering the font stack so that Cascadia Code comes later, which works for me but there is a chance that others may hit this issue or similar

I'm not sure I understand the issue: if you want to prioritise Menlo, why not place it earlier, as you mention?

Do I understand your goal correctly?: "have a set of fonts that might be available locally and never load remote fonts"