Every time I refresh the page I have to wait for a bunch of requests to return before I actually see the fonts appear. The fonts are cached and all these requests return a "Not Modified" header. Is it proper browser behavior to not display the font until it is made certain that the font hasn't been modified? Am I missing something?
I understand that I can use a generic fallback font until the proper fonts are loaded, but this will break my page.
I'm seeing this behavior in Chrome and Firefox, both on Ubuntu. My internet is really patchy, so sometimes I have to stare at a fully loaded page with invisible text, it's really frustrating.
You should always use a fall-back font, and design your page such that it will not break the page. Sometimes the Google font service may be unavailable; other times, your users could be behind firewalls that prevent downloading the fonts. And, as you've seen, your fonts won't display immediately until the browser is satisfied that the fonts have been downloaded properly.
Related
I'm using Bootstrap glyphicons. They are working nicely, but with Chrome browser, the glyphicons blink when the page loads
For example:
Open this link on Bootstrap:
http://getbootstrap.com/components/#glyphicons-glyphs
Once loaded, Press F5 or refresh.
You will see the glyphicons blink.
How can I fix it so they don't blink?
Here's a screenshot:
Note: This only happens in Chrome, not FF or IE.
Generally, this is a problem with having a flash of unstyled content (FOUC).
Specifically, this is what Paul Irish calls a flash of unstyled text (FOUT):
In Firefox, basically the text is in a default webfont until the custom font is ready
Webkit takes a very different approach, and very intentionally. They believe it’s better to keep the text invisible until the font is ready. This way, there is no moment where the text flashes into its newly upgraded self
In other words, this issue isn't so easily overcome.
You can attempt to minimize the impact by:
Using gzip to shrink the file so it downloads quicker
Using caching so the client can use an existing copy rather than grabbing a new one.
The heavy handed approach would be to wait to display the page to the user until everything was rendered, but I would strongly recommend against this. User are very impatient for initial load times but are considerably more forgiving when it comes to rendering additional content.
The glyphicons blink/flicker on page reloads, but the bigger problem for me (I'm using Bootstrap 3) is that the page flickers as elements resize around the glyphicons. Adding this to my CSS stopped the resizing for me:
.glyphicon {
width: 14px;
height: 14px;
}
Thanks to my source: https://www.garysieling.com/blog/preventing-icon-flicker-using-glyphicons
I had exactly the same problem but solved it by adding .woff and .woff2 as new MIME-types font/x-woff in IIS.
This stopped the glyph-icons from blinking immediately as Chrome now caches the font-file correctly.
To see if this may apply to you, open the debug-console in Chrome (F12) on the site it blinks and you will find an error related to the glyph-font-files where the browser interprets them as the wrong MIME type.
I mean this font collection: https://www.google.com/fonts
I want to use some maybe non standart fonts on my page. If I use Google Web Fonts on my site, will fonts be displayed properly? Or fonts from user's browser will be displayed? Or nothing will be displayed? Thank you.
caniuse # fontface – yes, you can, all modern browsers supports fontface.
The font you load will be used on all clients as long as the file from Google is available and the client understands this technology. Therefore you should not load too many fonts, because it dramatically slows down the page loading, as font files are pretty large.
Since you can specify multiple fonts in css, if the file is not available the second specification will be used. This should be something like "Arial", which is mainly available. The third specification can be something generic like "sans-serif". This assures that at least any font you want is used.
Nevertheless, the client will use any font if nothing appropriate was found. It will never silently display no text, just because your CSS does not specify something usable.
yes it will displayed properly and perfectly on web
so no need to worry, use it freely
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I downloaded a font kit from font squirrel called DestroyRegular and I'm using font-face in my css. The initial rendering of the font seems much slower than it should be. You can see my site here. Can anyone give me advice on how to speed up the rendering of my font, or do I just need a new font altogether? Thanks
It will be slow because the fonts are downloaded and then rendered, hence, the more fonts you use, the more requests it will make, thus making your initial loading slow unless and until the fonts are cached by the browser.
If you use Google Web Fonts, they will show you a page load bar, more the fonts, more the requests, more time for initial loading.
You can also turn on Browser Leverage Caching to set expiration
headers which will drastically cut down http requests for you
A friend of mine threw a website I made through the tool at http://analyze.websiteoptimization.com/ . When he came back to me, he insisted that my browser was preloading tons of unrelated images on only the homepage of the site.
I came back to him, insisting that YSlow (and other 'network' tabs in browsers) prove that only specifically-displayed images and content gets loaded on the homepage-- nothing else. I insisted that the statistics from that site are only for a complete visiting of the site, and downloading all the required images.
However, he's not convinced, believing that some browsers (i.e. IE) will pre-load that unrelated content regardless. For that reason, he uses a global CSS stylesheet, and then applies changes to individual pages by loading a separate stylesheet.
I thought it was best practice to minimize requests to the server, not to add more, which is why we have CSS sprites. I also thought browsers never load images unless they're needed to display the page.
I don't believe I can accept an answer without healthy discussion.
Am I correct in that the browser's not loading EVERYTHING on every page?
Is the above tool incorrect?
Is the lesson my friend's learning from the tool's results incorrect?
Thanks.
The browser will generally only load what's actually shown in the page. (There may however be exceptions in some exotic browsers, like Opera Mini.)
The WebSiteOptimization tool will only look at what images are referenced in the HTML and in the CSS, not which images are actally used in the page.
When I analyse my own webpage, which has eight different background images that are shown one at a time by random pick, the tool says that all eight images are loaded, just because they are in the CSS. Checking the network traffic in Firebug and IE developer tools shows that they aren't.
According to me
Browsers do load cached images at time but newer updates can check if the image has changed. Also there are permissions which coders can set to allow browser caching or not.
when using yslow or Google page speed which is a better tool try and use control+f5 to refresh your page so the site is forced reloaded without any offline files.
You can also set Brower permissions based on your preferences.
I also want to add a little about your last line a browser will load all images linked in the code even if there css property is hidden.
It always loads thing in the img tags first and then all images in the css code.
It will also process the image request in sequential order ie first come first server
I hope this help.