@Font-Face

What Changed

W3C's push for a standard font format for the web  (WOFF) has prompted the typography and browser industries to follow suit. Well at least some in the typograpy industry. At the moment all major browsers, Opera, Firefox, Chrome, Internet Explorer, Safari can either interprete WOFF or they will be able to shortly. In the meantime they can interprete other web font file formats and you can upload a file to your server for each of the formats (there are four for each font). As in the past it is going to take some time before all users download current versions of their favorite browser so for a while we will still need to use all four font file formats. In order to use these fonts you still need to have the licence to use them on the web.

Font License

Although when purchased, a font's license allows the buyer to use the font in certain software applications such as PhotoShop and Illustrator etc, the license does not extend to embedding fonts on the web. This is also the case for most free fonts even those obtained from online font vendors. Web Designers now have the option of obtaining a license when buying specfic fonts for the web. Open font license. Before you embed any font into your site you need to be sure that you have the correct license.

 

Obtaining Fonts

There are three main ways that you can obtain web fonts. You can use a Web Hosting Service,

buy the fonts that are licensed for web embedding or obtain web licensed free fonts and use a @font- face generator to generate the correct font file formats for web embedding. The third choice is the least desireable mainly because free fonts are notorious for not rendering correctly, well they probably render correctly but they look as if they don't based on their original low quality.

 

Font Hosting Service

One such company is Typekit:

• Link to the font on their server from you CSS
• Pay for the service per year
• The license is provided
• They provide different packets with various charges based on
  • Fonts per Domain
  • Page views per month
  • The number of websites
  • They have free trial offers

FireFox will not allow cross domain linking you will need the following in the head of your web document:

<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://domain.com" </IfModule> </FilesMatch>

 

Font Vendors

One such company is Font Spring
When purchasing lower priced fonts this is probably the best option.

• Pay for the font outright. Prices vary widely some fonts are very inexpensive others very expensive.
• Pay for the  amount of Domains on which you will use the font, with some fonts the amount of domains is unlimited.
• They provide
  
  • The License
    
  • Instructions for your CSS
  • Four font file formats: woff, eot, svg and tff. With some fonts you also receive the Open Face file but you are still not allowed to upload Open Face fonts to your server.

@font- face Generator

One such company is Font Squirrel

• You first download free fonts you must make sure that they come with the license to be embedded on the web
• First you are required to attest to the fact that the font you are going to use is licensed for the web
  
• You then you upload the font
• Once the @font-face has generated your files, woff, eot, svg and tff you can download them.
• You will need to post the license information (that you received when you originally got your free fonts) in your CSS
  

CSS for @font-face

@font-face {
font-family: 'fontName';
src: url('fontName.eot');
src: local('☺'),

url('fontName.woff') format('woff'),

url('fontName.ttf') format('truetype'),

url('fontName.svg#webfont9pAY3ErZ') format('svg');
}
The font name normally indicates that it is a web font.

Font File Formats

• WOFF

  
  Web Open Font Format - this format is compressed so it has faster download than TrueType or OpenType fonts. This format includes optional metadata which allows the font vendor to include information about the fonts usage. The compression is lossless. This format is in the process of being standardize by W3C which published WOFF as a working draft in July 2010.
  
  

• EOT

  
  Embedded OpenType is a compressed form of Open Type. The compression is LZ. Surprisingly Internet Explorer has supported WebFonts using the EOT since IE4.
  
  

• SVG

  
  
  Scalable Vector Graphics. SVG was created to display vector graphics for the web (it is not supported by all browsers). SVG uses XML to describe 2D graphics. As with all vector graphics, SVG displays fonts. One problem with SVG is that there there is no provision for font-hinting

  
  

  Font Hinting

  
  Font hinting (also known as instructing) is the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At low screen resolutions, hinting is critical for producing a clear, legible text for human readers. It can be accompanied by antialiasing and (on liquid crystal displays) subpixel rendering for further clarity.
  from Wikipedia read more
  
  [ close ]



• TFF

  
  True Type Font. Originally created by Apple later licensed to Microsoft. This can be licensed for web embedding. Easy to read on screen.
  
  

Matching the Font File to the Browser
Webkit/Safari

• WOFF since 3.1
• TTF

Safari Mobile

• SVG only

Opera

• TrueType/OpenType TT (.ttf)
• SVG (.svg)

Internet Explorer

• WOFF since IE9
• EOT since IE4

Mozilla/Firefox

• WOFF since 3.5
• TTF

Google Chrome

• WOFF since 6

CLOSE WINDOW

Send the link for this page to yourself

juude

sites

books

Orginially this site was started to provide a space for an overflow of information from my faculty site. I just needed somewhere to post basic web design information for students. From there the site appears to have taken on a life of its own, increasingly I am adding more information than I had originally intended. Now I find myself working towards creating an extensive web design library.

Most of the information is posted in standard web pages but as a hold-over from my lectures some information is also added as Flash and other upcoming information maybe added in a different format.

New articles and information are added frequently.

© juude.info

If you would like to receive notification when new articles are published join: new@juude

If you would like to contribute to the site with comments or tips please fill out this form.

From time to time we include articles from other writers so if you are interested just let us know. You can use the same form that is listed above.