View Full Version : fallback necessary when using font@face?

henry hayes
01-31-2012, 06:23 AM
If i use font@face and place the font in a folder on my server, do i still need to add fallback-fonts? Or can all browsers use the font placed on the server?

Im not sure if we use font-family with several different fonts is because

- the browsers can not render certain fonts or
- because browsers dont have access to the fonts


01-31-2012, 08:36 AM
If you specify the font definitions in the right order then most of the popular browsers should be able to use one of the four formats you supply the font in. Other less popular browsers will either use a fallback font or will ignore the font definition completely and use Times New Roman.

To maximize the chances of browsers being able to use the font specify it in this order:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');

where myfont-webfont is whatever your font is called.

Just remember that specifying it in that order means that the font will download even if it is already installed. There is an alternate arrangement that will use the local copy if the font is already installed but that version crashes the operating system when using an android phone or other android based device.

henry hayes
02-01-2012, 12:00 PM
Thx for reply felgall

Im still not sure how browsers approach fonts. Assuming were talking about popular western browsers like Chrome, Firefox, IE, Safari and Opera..

1. Do browsers have pre-installed fonts in their setup / software? So if we want to use special fonts, it will not work because the specific font isnt pre-installed in browser?

2. Or are the limited use of fonts in browsers due to the fact that browsers are not capable of rendering special fonts when "imported" from the server with an url?

02-01-2012, 12:20 PM
Browsers don’t have pre-installed fonts, it’s the operating system where the fonts are installed and from which the browser takes them. If you declare a font in your stylesheet the browser looks for it in the user’s OS and if it can’t find the font installed there it resorts to any fallback that is specified. This is why we are used to writing font-family: Helvetica, Arial, Sans-serif; or the like. If Helvetica can’t be found the browser looks for Arial; if that’s not installed it resorts to the default sans-serif font of the operating system (clearly, there is at least one kind of font installed in order to be able to display text). If you supply fonts with font-face then they don’t need to be installed on the user’s OS (that’s the point of it) and theoretically you wouldn’t need to provide a fallback. But since not all browsers necessarily support @font-face (it’s not the rendering, it’s the support of the CSS property/at-rule) or downloading fonts can be blocked, and because it’s barely any major additional effort, it’s still advisable to provide fallback fonts, and it’s not any different from what I showed earlier:

font-family: CustomFont, Helvetica, Arial, Sans-serif;

henry hayes
02-01-2012, 12:56 PM
Ok thx got it now.

But.. how does the styling "important" fit in then?

font-family: Verdana !important;

Why do we declare "important" if browsers by nature go for the first font declared in the font-family, then second and so on?

Why use the "important"-declaration at all?

02-01-2012, 01:12 PM
That !important declaration is not related to the font, it’s related to the CSS rule which is made more important than a CSS rule that may come afterwards and would normally override this one. By setting !important you’re telling the browser that this rule should have a higher specificity (“weight”) than following rules adressing the same element(s).

div {font-family: Georgia !important;}
div#example {font-family: Arial;}
/* Normally, the second rule would override the first one because it comes later in the code and through the ID selector it has a higher specificity. Setting !important makes the first rule override the second one. This is not just for font related styles, it can be used for everything: */
div {color: green !important;}
div {color: red;}
/* first rule is more important and overrides the second one */

henry hayes
02-01-2012, 01:40 PM
Ok ive got it. I think..

henry hayes
02-01-2012, 02:17 PM
Thx for info. Conclusion is, correct me if wrong, that font@face imports every font (with correct extension for spcific browser) as long as available on server. Hierachy is no. 1 first, then no. 2 and so on in a font-family.

When it comes to using "important", this declaration adresses the "natural" hierachy of CSS; the last styling in CSS can be outnumbered by adding "important" in a previous styling.

02-01-2012, 07:25 PM
You shouldn't need to use !important in the stylesheet you attach to a web page - if you have a situation where it looks like you need it then you simply have the CSS the wrong way around.

Your visitors would use it in the stylesheet they attach to their browser so as to make sure that their styles still override yours even if yours are more specific and so would normally take priority.