Archived topic
FOUT issue with custom font-face in additional CSS
15 replies · Started by Chris on December 10, 2021
Hello,
Up until today I was using Sofia Pro as a custom font and things were working out ok. I decided to change it to Proxima Nova and it is causing issues with a 2-3 second FOUT, and on mobile it is not showing up at all and the styling looks pretty atrocious.
Not sure what is missing here because the font was uploaded the same way as before and referenced in the additional CSS section as before. Using WOFF2 and WOFF files as well. I checked to see if it was an issue with the SiteGround Optimizer plugin and turned off things relating to fonts and there is no difference.
Thanks for your help!
So sorry, added the wrong login info in the private info of first comment. New info here!
Hi Chris,
That sounds like an obvious plugin issue, have you reached out to the plugin's support?
There is no custom font plugin being used. It was installed directly via the file manager and called with css.
I have tried turning off the caching plugin but it doensn't seem to have an effect
Oops, sorry I misread your topic, my bad :P
Can you also share the link to your site and keep the cache plugin deactivated? Thanks!
caching plugin is off!
You haven't sent me your site link yet.
The login doesn't work for me, can you check?
https://www.screencast.com/t/AueS6Poi
not sure what happened. I just created new login credentials for you here.
Can you make sure the URL of fonts in the @font-face CSS is correct?
https://www.screencast.com/t/PE33B22QIGE
i just updated the links and it did not seem to change anything! I don't know how it got duplicated like that...rookie mistake lol
I feel like the URL should've been https://your-domain/wp-content/uploads/2021/12/ProximaNova-Regular.woff2
Can you give it a try?
you're magical. thanks again for your help!
marked as completed
