join: new@juude

get alerts for new articles


join: new@juude

get alerts for new articles


Font Format

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


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.


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


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


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