Search within TutorialsPark

CSS3 @font-face Property


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


Definition and Notes.

1. For a text block to be displayed to the user in the same font as you have set, the user's system(or devices) 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 fonts independent from any Browser Platform or Operating System.

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


CSS @fontface: Formats and Browser Support

WebFonts- Formats, Extension and Browser Support

Format Format String Browser Support
Embedded Open Type(.eot) "embedded-opentype"
internetexplorer
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(fontsquirrel.com) offers a very wide range of fonts for commercial usage without any restrictions.


Syntax:

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


CSS3 @fontface property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-Different Versions of @fontface have different name..

Property Values

Font descriptor Values Description
font-family name To specify the font family.Its a Required
src URL To specify the URL where the font resources are located.Its a required.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-expanded
expanded
semi-expanded
extra-expanded
ultra-expanded
To specify how the font face should be stretched. Its Optional
font-style normal
italic
oblique
To set the font styling(normal or italic.). Its optional too.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
To set the thickness of the font. Its optional.
unicode-range unicode-range To set the range of the unicode characters the font supports. Its optional.

Related Examples.