NO BUG/SOLVED: Is Preload Custom Fonts option working in 2.0.1?

Bugs
1

I’m not sure if I’m using this setting right.

I have Google Fonts disabled. I have Barlow loaded locally using the Bricks custom fonts system. I have Preload custom fonts setting checked. My CSS loading method is external files if that matters.

I also have LSCache, which does not have settings for preloading fonts, but it does have a setting for disabling Google Fonts, I have Google Fonts settings OFF since Bricks handlings disabling it. There is also font swap method which is set to “Default” rather than “Swap” which is the only other option.
Note LSCache does not have its own setting for font preloading so this is entirely handled by the Bricks setting I would think.

All that said, after clearing caches and so forth, I still get a FOUT where the font appears as Times New Roman (default system font) rather than any of my selected fonts in the whole stack.
If not Barlow, I have sans-serif, Roboto, Ubuntu as fallbacks from the Bricks theme. If not those, the base font stack is set to “-apple-system,‘system-ui’,Segoe UI,roboto,helvetica,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol”. This is done from the Bricks base stylesheet. It’s all sans-serif.

And even with all those sans-serif font stacks, it still flashes Times, a serif font that I have set nowhere in CSS, it’s just a browser/system default. It would be one thing if it flashes another sans font but going from serif to sans is much more jarring.

Why is it flashing the system font and skipping every font in CSS, and also NOT preloading as the Bricks setting suggests? In the page source code there is no refernce to rel=“preload” at all.

Obviously this could still be the fault of my LSCache settings somehow, but I also want to make sure the font preloading setting in Bricks is actually working, because it’s not outputting any preload config into page source.

fix: Custom Fonts Preload Only One Font Weight Instead of All Variants
SOLVED: Font Manager: Custom Font Not Loading From Local
2

I’m having a similar issue. No caching, so that’s not the problem, and I hadn’t yet disabled Google fonts. But if I specify a custom font, it will render fine in my preview, but load as a default serif on the front end (when even the fallback fonts are sans-serif). Enabling or disabling ‘preload custom fonts’ didn’t help.

3

Hi Zack & Nicole,
Thanks so much for your report!

The font manager currently has a few issues here and there, but I cannot reproduce your problem. Please send us access data to the website where the problem occurs and a link to this thread to help@bricksbuilder.io so that we can take a detailed look at it.

Best regards,
timmse

4

Thanks, I’ll DM you a link.

5

Thanks so much for setting up the staging site!

  1. the fonts were only set in ACSS, but not in the Bricks theme styles or directly on an element, so Bricks couldn’t even know that you were using these fonts.
  2. after I set the fonts for the body and all headings in the “Global” theme styles, they were still not preloaded. This is because you have two theme styles, “Frames” and ‘Global’, which are both applied to “Entire Website” and “Most specific” is set in the Bricks Settings (this is almost identical to the default behavior < 2.0, where only one theme style is loaded).

You have two options to solve this:

a) You delete the “Frames” theme style or remove its condition (it contains nothing that is not set in the other theme style anyway).
b) You change the theme style loading method in the Bricks settings to “All”.

You can directly mash the staging installation (please do not push to production ^^) :v:

Since the functionality of the theme styles can be confusing, especially with regard to the “most specific” setting, we will supplement the academy article in a timely manner and show examples of when to choose which method.

6

Interesting.
I hope I didn’t waste your time!

Yes typically with a framework like ACSS we just set all the global options there. I guess in my mind I was assuming you simply preload all custom fonts regardless if they happen to be selected somewhere on an element. As an example, what if we have content in Gutenberg and use Bricks to output it, would Bricks detect the fonts in use if they come from Gutenberg content?

Another way custom fonts are used outside of Bricks would be through custom CSS, stylesheets loaded through a snippets tool or the output of a shortcode or plugin etc etc. Bricks can’t detect font usage from any other other means except when styled directly on elements? I wonder if that’s the best way?

Perhaps another option would be within the custom fonts tool, have a checkbox to “preload at all times”, verses letting Bricks try to detect it.

Regarding the theme stacking, if two themes are both global, how would it decide which one is “more specific” anyway?

Thanks for following through! Version 2x has been great so far!

7

Not at all :slight_smile:

No, that would be pretty suboptimal from a performance point of view. Why should the fonts be loaded if they are not used anywhere?

The Gutenberg content uses the same fonts that are set in the theme styles (for body and headings), so they are also preloaded there. Apart from that, you can’t change the font families in Gutenberg, can you?

That is correct. But if you go the custom route, you can also set the preload tag manually, if desired. But as I said: the “regular” way is to set basic settings (and this includes font families) in the theme styles.

That might be an improvement request, but at the moment I don’t quite understand what the point is. The font would always be loaded, even if it is not used, which is a disadvantage rather than an advantage.

Either the first or last theme style created (I’m not quite sure right now).

NO BUG: FOUT despite 'Preload Custom Fonts' enabled