@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:

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. They provide


>@font- face Generator

One such company is Font Squirrel

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

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 Safari Mobile Opera Internet Explorer Mozilla/Firefox Google Chrome

code

color

CSS

design

type

writing

info arch

the net

php

seo

user

usabilty


be inspired


my notes