join: new@juude

get alerts for new articles

CLOSE WINDOW

@font-face

Font Format

Browser	Font Format
Eventually all browsers	woff
Internet Explorer	eot
Chrome, Safari, Opera, Firefox	ttf
Safari Moble	svg

WOFF

Web Open Font Format - this format is compressed so it has faster download than TrueType. It 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 web fonts using EOT since IE4.

TTF

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

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.

Code for CSS

When you buy fonts the vendor normally supplies you with code simular or the same as below.

@font-face {
font-family: 'fontName';
src: url('fontName-webfont.eot');
src: url('fontName-webfont.eot?#iefix') format('embedded-opentype'),
url('fontName-webfont.woff') format('woff'),
url('fontName-webfont.ttf') format('truetype'),
url('fontName-webfont.svg#fontName-webfont') format('svg');
}

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