Hello,
I seem to be having trouble with my TypeKit fonts having a very quick delay in rendering when loading each page.
http://wisconsin-school-of-professional-psycho.webflow.io/
It always ends up with the correct font, but it displays a different default font for about half a second before hand, which is very distracting. I’ve tried on multiple different computers, and each are showing the problem.
Anyone else have issues with this?
If I’m not mistaken, I believe Webflow is calling on your fallback font and loading it first so that content is being displayed to the user quickly. People generally abandon a site if it doesn’t load in 3seconds.
So in instances of poor or low connection speeds on your device, (i.e. 3G network, poor service area, or a slow internet speed) Webflow will display your fallback font first just to get some content up and going as fast as possible.
There’s a chance I’m wrong about this but I vaguely remember this topic during the Typography webinar workshop a couple weeks ago, @PixelGeek ?
Thanks for the response.
It does seem like that is what happening, but I’m having a hard time understanding why it does every time, even when my internet connection is really fast. It’s really distracting, and my client is not happy with it.
@PixelGeek Have you seen this happen on any other sites?
Hi @craigleren, this might be related: http://forum.webflow.com/t/font-fallback-font-loads-briefly-at-page-load-issue-with-fout/25081
That post deals with google font, but I think the issue may be the same.
Thanks for the reply Dave.
I tried adding that custom code to the header, but it still is having the same problem.
Anything else I can try?
I found a solution, but not an ideal one.
I had to clear the TypeKit from the Webflow Font Site Settings and then add the embed code from the Typekit website to the header, and change the async from “true” to “false”
This is explained on a Typekit help page: “If you would prefer to have the page wait for the fonts from Typekit to be available, you can use the script tag to block the page render and prevent any chance of FOUT; remove the async: true option or set it to false.”
https://helpx.adobe.com/typekit/using/embed-codes.html
The only problem now is that my futura-pt font does not render properly in the designer. It’s not the end of the world, but would be great to figure out a way to be able to change the async setting to false and still have the font available in the designer.
Any thoughts on this?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.