@Font-Face
Web Designers have had very low expectations when it comes to html generated typography, so now, even the breadcrumbs that we are getting now seem amazing.
Until recently web designers have been restricted to using fonts that were installed on the user's computer which limited their choice vastly. Although W3C introduced @font-face with CSS2, and IE has supported it via the EOT font format since IE4, it has never really caught on until now. One of the main reasons for this was the font license. Major font foundries / vendors were in no rush to license their fonts to be embedded into web pages.
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.
- 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'),
p>url('fontName.svg#webfont9pAY3ErZ') format('svg');}
The font name normally indicates that it is a web font.
Font File Formats
-
WOF
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
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
- SVG only
- TrueType/OpenType TT (.ttf)
- SVG (.svg)
- WOFF since IE9
- EOT since IE4
- WOFF since 3.5
- TTF
- WOFF since 6
