Hello. When my post page loads, the font size is larger than what I have it set to. After the whole page loads, the font then sizes down to what I have it set to in the theme panel. You can see an example here.
It sometimes does it when on the initial page load and sometimes it doesn’t. Cycle through the ‘Top Stories’ in the sidebar and it happens pretty much every time.
This may not be specific to your issue, but FOUT is a common issue with the trade off between fancy fonts and page load/speed.
This is called “flash of unstyled text” (FOUT) and is a common issue with using Google Fonts (etc.), as they are loaded from someplace other than your own site/server. SO, often the page starts to load, uses browser fonts, then the fonts load from external source (e.g., Google CDN). This is somewhat unavoidable if you’re going for maximum “pagespeed” as not everything can load at same time even when async or using the speed booster beta plugin; many times the loader for such fonts is deferred and moved to bottom of page to allow “above the fold” content to load quickly for a better pagspeed rating — such as with Google PageSpeed Insights).
Often something is slowing page down like a plugin, too large image, or similar, and this “holds up” getting to the font loading.
Solutions typically
1) change order of font loading
2) switch to web-safe fonts only
3) if using CSS over-rides on style sheet embedded in page AFTER main style loads, better to edit style sheet if there is measurable delay between the default style loading and the over-ride (meaning if main style is at 48 and your over-ride is 40; then the 48px still loads first, and then gets over-ride – by not doing over ride and editing core file, it starts at 40px to begin with).
FOUT isn’t too terrible, but it can be annoying.
Some of the above may be only informational to your issue, but I’ve been learning to live with this on some of our sites for better speed.
@Christopher Thank you for that very informative reply! I have been following all of your post and they have all helped me out, especially with page speed. Thanks again!
@enemyborat
glad all my little rantings are helping somebody 🙂
“fonts and FOUT” Subject is top of mind for me at the moment as I’ve been toying with the difference between loading Open Sans off the Amazon CDN (where was able to compress the stylesheet more than the Google version is, for those who’ve run into that item on GTMetrix for scoring; meaning I basically am loading a minified and optimized version of the Open Sans font stack off the Amazon CDN for better performance/rating), vs just loading from Google directly. I get FOUT on my page right now with the CDN, and sometimes IE won’t load Font Awesome off the CDN at all (even with proper CORS rules) – whole ‘nother topic of pain there. Gave up and am loading Font Awesome 4x off our own server since IE 11 just randomly doesn’t load it and then all my icons are blank spots.
Anyway… “right now” if I go to a test page for site redesign (NOT using WordPress btw), I see moment of “italic” font then regular font. IE will load the italic font first for some reason so I see FOUT from italic to normal font. Stupid stuff (damn IE!!!).
I’m actually hoping to use the Google font CDN, and then the upcoming stable version of mod_pagespeed has a nifty feature where it will inline only the needed CSS for the browser being used.
So, for example this page …
http://www.send2press.com/clients/testimonials_2008-2012.shtml
I see a FOUT in IE11 on Win7/64 with a 32GB RAM machine on a 85mbps FIOS fibre connection. Page loading on dedicated server in Class A datacenter (Softlayer/IBM) with common elements like logo and main CSS coming off the CDN. Blah blah. Meaning, it’s not loading off anything with slow load times.
Starting to just “live with it.” Annoying as hell, though.
(argh)
Browser “should” cache the CSS on second page view. I have my cache in browser set to clear on close so I can re-suffer the view of a first time visitor EVERY time. Hence the annoyance can really annoying. Google “FOUT” to see the couple of years of whining by others, if one cares to. 😉
