WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I had to go to TypeKit to get the font I wanted for my header/logo. However, the default font still displays for a second before the TypeKit font kicks in and covers/replaces it. Is there any way to keep the default font from showing? It spoils the presentation by announcing "Hey, look how I'm changing this font!"
I tried changing it to white, but that, of course, made the TypeKit font white.
The blog I need help with is piedtype.com.
Thanks for the note. I'll check in with our developers to find out if there's anything we can do from our side.
Thanks!
The phenomenon you see is what designers like to call the FOUT - "Flash of Unstyled Content". It's a behavior that is browser dependent.
Until recently, it was mostly seen in Firefox, which was immediately displaying text with the fallback font, then replacing it when the webfont has loaded.
Another behavior has been applied by Chrome, Safari and IE, which display a blank space until the font has loaded. To prevent end-user frustration on slow networks, browsers have also implemented a default 3-second timeout: if the font never loads, the fallback gets applied.
Many designers wanted a consistent behavior across all browsers, so the Google Webfonts team together with Typekit have created a javascript solution, that allows to tell the browser how to behave (show the default immediately, or wait until the webfont loads).
That script is called the webfont loader:
https://developers.google.com/webfonts/docs/webfont_loader
It adds CSS classes like .wf-loading, .wf-active, and .wf-active, which allows you to define in your stylesheets what font gets applied when.
Some time after that, Firefox listened to webdesigners and adopted the same behavior as Chrome etc. So this javascript workaround isn't needed, unless you want users to see the FOUT (perhaps for accessibility reasons).
However, if you have a look at the styles applied to your site header, you will notice that that font is applied with the following rules:
.wf-active #header #logo .title .site-title, .wf-active #header #logo .title a {
font-family: "john-doe",Palatino,“Palatino Linotype”,"Book Antiqua",Georgia,Times,“Times New Roman”,serif !important;
}
Notice the .wf-active class - that's the issue here. To get the behavior you're looking for, you should remove that class from your custom CSS:
#header #logo .title .site-title, #header #logo .title a {
font-family: "john-doe",Palatino,“Palatino Linotype”,"Book Antiqua",Georgia,Times,“Times New Roman”,serif !important;
}
I hope this helps :)
Manu
Thank you! That fixed it in both Chrome and Firefox. I'd have never figured that out with my very elementary knowledge of CSS.
I checked in with our Custom Fonts developers, and here's what I found out. We do adjust for FOUT if you are using the build in tools at http://en.support.wordpress.com/custom-design/custom-fonts/ but if you are using the advanced mode for fonts with Typekit, you need to make some adjustments in your custom CSS directly.
Great explanation from squarepixel about the details on this! I'll add to it just a little: instead of removing the wf-active class (or adding additional rules to try to override them as squarepixel suggested), you can use the wf-loading class to simply hide the unstyled font so that it never loads. This is the recommended option shown at Typekit's site here:
http://blog.typekit.com/2010/10/29/font-events-controlling-the-fout/
You need to copy their example CSS and adjust it based on the selectors you have chosen in your Typekit font kit. Doing it this way will also prevent you from having to change your custom CSS should you decide to change fonts again on the Typekit site. If you change selectors though, you'll still need to update the custom CSS to match.
Here is the CSS example from Typekit:
windwhistle
designsimply
.wf-loading .blog-title,
.wf-loading .post-title {
/* Hide the blog title and post titles while web fonts are loading */
visibility: hidden;
}You should replace the ".blog-title" and ".post-title" parts with your selectors and add the updated CSS to your Appearance → Custom Design → CSS editor.
Thanks, designsimply. Between you and squarepixel, I will have learned a lot -- once I've thoroughly digested all this.
Yep, it's a tricky issue indeed. And the "magic" solution is always changing as the leading browsers update their behaviors...
If you want the in-depth story, this is probably the most knowledgeable article on the topic, by Paul Irish:
My son's a developer so I've seen behind the scenes what a struggle it is to make code work properly with multiple versions of half a dozen different browsers and at least as many different kinds of devices. My hat's off to those of you who can make it all work!
This topic has been closed to new replies.
