Customized web fonts

In the past, if the embedding of customized fonts was required, it would result into the use of images that would display the desired words. Nowadays customized fonts can be rendered dynamically by the browser using different technologies.

Taggings:

Submitted by Xiashuo Lin on Tue, 11/27/2012 - 11:32
1 answer

Embedding customized web fonts using CSS and @font-face

To ensure the best cross-browser support it is necessary to convert a font file (usually in OTF or TTF) to OTF, TTF, EOT, WOFF and SVG files. This can be done with e.g. Font2Web or Font Squirrel .

The next step is writing the CSS. In the example below the font Atype 1 is embedded. /fonts/Atype1.[extension] denotes the relative path to the file:
@font-face {
font-family: 'Atype1';
src: url('/fonts/Atype1.eot');
src: url('/fonts/Atype1.eot?#iefix') format('eot'),
url('/fonts/Atype1.svg') format('svg'),
url('/fonts/Atype1.woff') format('woff'),
url('/fonts/Atype1.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Now the font can be used by referencing it:
h1 {
font-family: 'Atype1', Arial, sans-serif;
}

Submitted by Xiashuo Lin on Tue, 11/27/2012 - 11:49