Search within TutorialsPark

CSS @fontace Rule

Use CSS Webfonts to make your fonts indepenedent of any Browser or Operating System

CSS Web Fonts : @font-face

1. For your text to be displayed to the user in the same font as you have set, the user's system too must have the same fonts installed on the system.

2. But with CSS3 @fontface rule you can download a non-standard form and embed it on your page, and then use it as a font for your text. Thus, making your font's independent from any Browser Platform or Operating System.

3. It defines the font and provides the browser with the location of font files.

Syntax: CSS Webfonts - @font-face Rule

font-family: To define the name of the webfont

src tells the browser location of fontfiles

local(): local() uses the filename to find if the font is available locally

url() url() to specify the path of font if its not available locally but, files must be on the same domain address of the website.

format specifies the type of font

Example: CSS Text - @fontface Rule

Give it a TRY! » Note: The WebFonts format Web Open Font Format (.woff) is supported on all browsers, hence should be the first preference.

CSS @fontface: Formats and Browser Support

WebFonts- Formats, Extension and Browser Support

Format Format String Browser Support
Embedded Open Type(.eot) "embedded-opentype"
TrueType(.ttf) & OpenType(.otf) "truetype"* or "opentype"*
chrome firefox opera internetexplorer
WebOpen Font Format(.woff) "woff" chrome safari firefox opera internetexplorer
Scaleable Vector Graphics(.svg) "svg" chrome safari opera

Licenses for Webfonts : Many Webfonts comes with the terms of Condition regarding the use of fonts. Hence, be careful not to violate usage licences.

Store Fonts on your Server : The best way to store fonts is to have them on your own server, however in some cases you may not be allowed to store them on your own server due to copyright restrictions.

Hosting Fonts on CDN : You can host fonts on Content Distribution Network(CDN) like Typekit, Fontdeck, WebINK and Google webfonts.

Resources for Webfonts : Font Squirrel( offers a very wide range of fonts for commercial usage without any restrictions.

CSS @fontface: Bold and Italic

If there is anything that a man can do well, I say let him do it. Give him a chance. - Abraham Lincoln


1. A @fontface rule can get only a single font at once, so its not possible to have versions of italic and bold for the same font.

2. Hence, we need to use seperate @fontface rule for each version of italic or bold.

3. Or else you may have @fontface fonts with all its version packed into one, infact that is how most of the fonts are available.

Example: CSS @fontface - bold and italic

Give it a TRY! » Note: Different Versions of @fontface have different name.