Fonts are often large files with slow load times. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT).

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font by including "font-display: swap" in your "@font-face" style.

I'm looking for a way to do add this style in Coffee Cup Site Designer before exporting. The only way I found so far to do this is to add this style to the \css\main.css manually after exporting, see example below.

/*Custom Fonts Definitions*/

@font-face {
font-family: Le Havre Light;
src: url('../custom_fonts/Le Havre Light Light.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Le Havre Regular;
src: url('../custom_fonts/Le Havre Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Roboto Regular;
src: url('../custom_fonts/Roboto-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

Create a css folder in resources named ZCSS
In that folder insert your custom code.
Link to that folder in the page headers
The custom code will be read last (hence the Z)
That should do it.

Thank you for your suggestion, but I don't quite understand how to implement what you suggested, I was hoping there is a more simpler option to do this, like selecting Font Weight or Font Wrapping. See attached file, it should explain what I'm after.

I'm surprised when introducing Custom Fonts that the Coffeecup developers did not take this Font Display Syntax into consideration seeing that Google PageSpeed Insights complains when this is not in place (see attached file) (https://developer.mozilla.org/en-US/doc … nt-display)

I think I will post this as a suggestion for the next Site Designer update.