kaibrockelt
commented
11 months ago Actually there are more than 2 fallback fonts that can be defined system-wide. I was not 100% up2date. https://www.w3schools.com/cssref/css_fonts_fallbacks.php
Serif Sans-serif Monospace Cursive Fantasy
These are all the specified options
Describe the bug A clear and concise description of what the bug is. Hi! I don't know whether rating this as a bug is 100% accurate, but as i see it for now, Oxygen lacks the definition of fallback fonts. This leads to an unwanted Cumulative layout shift and highly visible changes during font swap, which can lead to visible jumps of the page on slower connections. Whether this is a bug now or an improvement in load performance, I cannot judge.
If Oxygen would consider a fallback font like serif or sans-serif, the pageload can be tamed massively.
Provide the link to a Sandbox install where the issue is present. If the issue only exists on a specific post or template, provide a direct link to that post or template. This can be seen on "any" sandbox, but here's one ive just opened: https://oxygen-qp4wm33z62wvl.oxygen-demo.qsandbox.org/
If the timing is right, you should see a page with the CSS loaded, but the font file still waiting for swap. And here is where the CLS can occur, depending on your choice of fonts.
Why is that so? The css is loaded and indicates a non-system font. the font file is not loaded yet, hence the browser falls back to its own default.
While on the same page, go edit the CSS code and add the fallback font: sans-serif. While loading, you can see that the picture is way more aligned with what the page will look after a full page load. The shift is reduced, the optical flickering is reduced.
current workaround To stabilize the fonts, i had to inject a custom CSS code into the header that overrides any oxygen definitions with !important. If there is no important, the rules of oxygen not containing any fallback will kick in during loading, provoking the flicker again.
proposed solution the font config should include some toggle to decide the fallback fonts for each case. this could also include the value "no fallback", leading to the current oxygen behavior, which might be wanted in certain use cases. I imagine a single radio group or dropdown offering the three values: