Font flicker font-display: swap / fallback

I am using local custom fonts and I was wondering if someone else has a problem with font flickering.

The default bricks setup is

@font-face {
	font-family: "Montserat local";
	font-weight: 400;
	font-display: swap;

But I had to use a custom header code to make it smooth

font-display: fallback;

any ideas?

1 Like

Yep, see here: WIP: Various element typography styles reverts to default styling when breakpoints are selected

Hi Thomas,
Thank you very much for your report.

I’m not sure if the other report is related to your issue, but can you possibly show the “flickering” in a quick video?

Best regards,
timmse

lol. a year ago, but still relevant :smiley:

this is a simple F5 refresh. https://www.youtube.com/watch?v=G3lGzycWUX8

CLS

Hi Thomas,
bricksbuilder.io is currently still running a very old version of Bricks (we are currently working on a new website) and accordingly should not be used as a reference :smiley:

Yes ok, but this happens on my page as well. tomadigital.de (latest version)


image

Custom Font added. Global Typo = custom font. Just this simple setup.

I can’t reproduce the problem on your site with a simple reload because the font file is already in the cache. If I clear the cache during the reload, it is reloaded, and at that moment, the default font is visible for a split second, which is unavoidable.

It is recommended to use a similar default fallback font, e.g., Arial if you use a sans-serif font, so that you don’t switch from a serif to a non-serif font.

How do I set the fallback?

1 Like

In the Theme Styles:

Please see this reference for commonly used font fallbacks: CSS Font Fallbacks

awesome, thank you. 20 characters