Since Webflow’s been advising not to use Google Fonts API for loading custom fonts I’ve been uploading the font to the project but am now having to deal with the default placeholding font flashing momentarily (FOUT) whilst the custom font loads = super annoying (even though it only happens the once on the initial load).
I’ve been through quite a few of the posted methods of dealing with this but nothing’s working (I used a delayed page load interaction to hid the problem on a site, but can’t use this idea for every situation). Has anybody had success stopping this from happening recently? As in 2024?
Did you define the fallback font to be used in case a user’s web browser fails to load your custom fonts in project settings?
Another technique I use is to set a wider range of font choices on the HTML element from a list that includes most common ones available on client operating systems. Those can be subsequently replaced with your custom fonts on the body and other elements.
/* Sans pref */
html {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}
It would be nice if Webflow gave us the option to load custom fonts in the head and preload but they don’t. I do this on exported sites.
Yes, the font does have a default defined. The problem is avoiding the flash of the default to the custom. The only way to prevent this that I have experienced so far is to use the Google Font API setup. (Or, as I said, get created with a page loading interaction that hides the switch from one to the other.)