View Full Version : font-family requirements

08-10-2011, 09:08 PM

Does the browser or operating system define what font family a webpage can render?

What font is used if the specified type is not available? Does the browser have a default font that then is used?

font-family: "Antipasto";

08-10-2011, 09:18 PM
You should use the fonts which are available in all systems by default. Following are some links to understand font-family property of CSS.





However You can use any font using CSS3 property @font-face. Following is link for it



08-11-2011, 02:06 AM
What font is used if the specified type is not available? Does the browser have a default font that then is used?

Well, yes, the system will use some kind of font, most likely the one that is set as default system font. You can and should specify a fallback font, though, like:

.myfont {
font-family: Antipasto, Helvetica, Arial, Sans-serif;

This way the browser is using the first font that is existing on the system. The last one specifies a generic sans serif font for the system to choose if none of the earlier ones are found.

08-11-2011, 08:08 AM
Thank you for the response.

The webpage is using a specifc font family according to a design. Using a rollback font will obviously change the design or make it inconsistent with other elements which I would like to avoid.

The css attribute font-face looks interesting. If i understand this attribute correctly it will enable the browser to download the font necessary. This might solve the problem for newer browsers. One immediate problem seems to be IE supports other extensions (.eot) than Chrome, Safari and FF (.ttf and .otf). Atm I only have the font in .ttf extension. Are there any other issues I should think about when using this attribute?

08-11-2011, 03:23 PM
OK, for one, it’s called “at-rule”, not attribute. HTML element have attributes. In CSS there are properties (and values) – and certain at-rules like @media, @import, or @font-face.

Now, you can only embed a font with the CSS at-rule if the license of the font allows you to do so because technically people will be able to download the font from your server and use it themselves which some foundries don’t want. Some quick investigation on the Antipasti font led me to zetafonts (http://www.zetafonts.com/submenu/124/149) which seems to be a little vague in the wording of the free non-commercial license. However, their commercial license clearly states that their fonts may only be embedded “in such a way that they cannot be extracted from the files you create.” First thing you have to determine now is if your project is commercial or non-commercial and in case of any doubt about CSS embedding contact the foundry.

If everything is alright and you are allowed to embed the font with CSS then there is the Font Face Generator (http://www.fontsquirrel.com/fontface/generator) that converts your font file into all necessary formats and generates the necessary CSS for you for cross-browser compatible embedding. Note, however, that you should still provide alternative font families just in case. You should look for standard fonts that match the size and shape of the main font as closely as possible so that a fallback doesn’t affect your design too much.