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 RuleGive 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"* |
|WebOpen Font Format(.woff)||"woff"|
|Scaleable Vector Graphics(.svg)||"svg"|
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.
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.