My webpage shows a default font before showing the font I have set in CSS

[Eugene123]

Is there a way to stop the default font from showing on my website? On load it shows a default font and then the actual font I have added in the CSS.

This is the code I use and I have uploaded the font in the system.

@font-face {
font-family: 'Garamond';
src:url(fonts/EBGaramond-VariableFont_wght.ttf);
}

Website URL: https://www.supportexltd.com/

[Bernadette3]

Hi @Eugene123 What browser are you using? I checked the site you posted, but I only noticed one font displaying. 

[Eugene123]

Hi @Bernadette thank you for your reply. I've been using Chrome mainly, it seems to happen once cache is cleared.

[PaulMathews · Accepted solution]

@Eugene123 Out of curiosity, why did you not employ the "EB Garamond" font for paragraph titles directly in the Weebly theme styling panel for fonts as opposed to manually uploading the font to the site's Assets folder? I did see the "flash of unstyled text" when I initially loaded your site which indicates that the default font style for h2 titles in that theme is something other than EB Garamond (this isn't quite the same as FOUT since the site is likely loading the default font for h2 and then switching over to EB Garamond). If you simply change the font style for paragraph titles in your Weebly theme (to EB Garamond which is an available font in the font choices), that should change the default font for h2 to EB Garamond and eliminate the FOUT.

[Eugene123]

Hi @PaulMathews that is avery good question! I didn't know it was available probably me not looking properly. I've changed it to EB Garamond now and I think that has fixed the issue!

Thank you so much for your help!