Do I need to provide a spare font for a web font?

Question

We use some web fonts on our site, for example.

<link href="http://fonts.googleapis.com/css?family=Anton" rel="stylesheet" type="text/css"> 

Due to an error in IE8 , I have no desire to get around each other in other ways, I would recommend the authors of our site so that they do not provide a backup copy of the font when specifying web fonts. For example, instead of:

 font-family: 'Anton', "Arial Black", sans-serif; 

.. do...

 font-family: 'Anton'; 

Is there a real world scenario where this can cause problems, namely, why do I need to provide a fallback for the font that I provide?

Answer 1

I doubt that you will have a problem with the inaccessibility of Google. However, some browsers use a spare font until the downloaded font is downloaded.

From Google: https://developers.google.com/webfonts/faq

How is the text displayed while the browser is still downloading the font file?

The behavior of the browser depends on the type of browser. Some will display the text after loading the font file, others will use the backup font from the font stack, and then refresh the page when the font is available. The latter behavior is commonly referred to as "flash of unrelated text." For browser information, see Technical Considerations Page.

For more control over how browsers behave during font loading, use the WebFont downloader.

Answer 2

Google fonts use the @ font-face tag. The original font assumes that your design / layout looks consistent if @ font-face is not supported or not available.

Link: http://webdesignerwall.com/tutorials/css3-font-face-design-guide

Answer 3

If the Google "font server" is unavailable, unavailable or not, the browser, in my opinion, will return to it by default. Thus, in this case, it would be convenient to define your own backup font.

Answer 4

... depends on your use of fonts:

Design match

• If this is a resource project that adds extra sugar on top of your application, it’s cheaper and it might be better to leave the text using this font instead of showing some wrong stylized elements. for example, a large special letter or sign in the background (for example: "?! #)
• If its decisive importance for design-oriented pages is better than Fallback, there will be some kind of static graphics or one of them made from Font, for example. via ( Typeface / sIFR / Cufon )

Corresponding function

• using a special font for default interaction elements (submit / button / links, etc.).
• using fonts to deliver unique icons ( Iconsets via Raphael ), for example. The navigation elements of its absolute are crucial for processing the backup, as this will affect the known and unknown parts of your users. Now you know about IE8 problems and don’t want to do your best to deal with them, but as for all browsers and systems in the wild - if you know your user database systems (intranet / enterprise environment) or can’t scale now for more support (time to market / development costs), it is normal to leave it at the moment

Content Style

• This is an ideal fallback scenario, at no additional cost and to customers who can read your articles / headings, etc. In this case, this is just a bad way to leave the opportunity to retreat.
• Printing support may fail if a standard font is not specified ( print example )
• A system of operating systems / assistants that increase contrast and readability or remove fonts to get readable content, use your own or standard fonts.

Of course, I missed some application - for the best help, indicate the type of use, at best with some example. But in all cases - you cannot assume that an external resource is loading, so if you want the user to deal with your application, he can do it regardless of network reliability, speed or system restrictions.

Sincerely.

Answer 5

Not using backup means that you have full faith in the following:

• that your site will always be loaded with a good internet connection
• the external font resource will always be perfectly accessible where you request it,
• that if your font does not load, the affected text on the site will look completely normal, without a font

If you do not agree with any of them, then yes, you should have a backup font that is designed to be backed up if your initial choice is not available.

Answer 6

Its always a good idea to at least provide ONE ANSWER: serif or sans serif. This font will appear if the @ font-face font request fails or takes too long to load.

In addition, you can achieve finer control over how your site loads with the google font downloader.

https://developers.google.com/webfonts/docs/webfont_loader

Answer 7

If you go to this styles link, you get ...

 @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; src: local('Anton'), url(http://themes.googleusercontent.com/static/fonts/anton/v3/tilmJBBU81h1G7ZsdY3Hmw.woff) format('woff'); } 

Where he says local('Acton') , he searches the user for a local copy of Acton, so you could write something like local('Acton'), url('http://themes.google...), local('Arial'); instead, and then link your own edited style, not using google api .. but I'm not sure if this will A) work correctly, or B) violate some terms of service (although I really don't understand why this should) .

Answer 8

Do not trust anyone on the Internet except Murphy's Law.

I always specify fallbacks (<offtopic> and on the other hand I am looking for a Firefox extension that deactivates the font based on each site, more like QuickJava than Stylish or Greasemonkey. This and no more position: fixed on other pages due to crappy web sites. Just expect users to start using it when they are fed up a bit due to poor choices and abuses by some designers. Not all, some. </offtopic>) because it costs me 10 to 16 bytes per gzipped and minified stylesheet and does not cause any other problem in my case.

If this causes problems, you weigh all the pros and cons and decide.

You will have a reserve: it is a standard font of a family by default ( serif ); Times or Times New Roman in most cases (with the exception of some or most Linux that I consider).

If your site is well-rendered with serifs on OS X, Windows, and Ubuntu, then you have solved one of your problems.
If you:

• expecting perfect pixel rendering even with different visualizations like Firefox, IE and Chrome on XP, W7, OS X and Ubuntu with "Cleartype" or not activated by users,
• using height instead of min-height
• etc.

Well, you might find out which difficult path you should not expect from the systems used by your visitors.

Answer 9

The "woff" format provided by Google does not work in all browsers and devices.

The following is a small list of browser-supported formats:

• .TTF: Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4 +
• .EOT: Internet Explorer 4+
• .WOFF: Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• .SVG: iPad and iPhone.

Systems that cannot display the "woff" format will most likely use Times New Roman or any other font used by default for the system. If everything is okay with you, then there’s nothing wrong with Google.

If not, I would suggest using Font Squirrel @ font-face Generator (or a similar converter) to create all the necessary formats for your font and use @ font-face to download the formats directly from your server.

Eg.

 @font-face { font-family: 'EnigmaticRegular'; src: url('../fonts/Enigma__2-webfont.eot'); src: url('../fonts/Enigma__2-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Enigma__2-webfont.woff') format('woff'), url('../fonts/Enigma__2-webfont.ttf') format('truetype'), url('../fonts/Enigma__2-webfont.svg#EnigmaticRegular') format('svg'); font-weight: normal; font-style: normal; } 

Answer 10

You need to provide a fallback font for non-JS browsers. Admittedly, this is an unusual problem on the desktop, and it can be very relevant if you are selling products. However, for flexible designs that need support for a wide range of devices, you need to have a backup other than JS.

Answer 11

Yes, you should still provide flip fonts. Having them gives you more control, and does not leave them at the mercy of the client. http://cssfontstack.com/ is a good resource for finding matching fonts.