Most new web browsers support the use of the .woff or less common microsoft .eot font file extension as part of a css file
- woff = web open font format - eot = embedded open type
// this is a sample injection of the google Tangerine font into a css file.
@media screen {
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://themes.googleusercontent.com/static/fonts/tangerine/v1/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
}
Once injected you can use the font like any other css style
{ font-family: 'Tangerine', serif; font-size: 48px; }
One of the best sources of pre-built woff fonts is the google web fonts library -
http://www.google.com/webfonts/
This is a collection of resources developed by google that hosts about 250 open source fonts online that can be accessed by incorporating a either a <link rel= tag into your <head> block - or adding the css directly into your skin.css file.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
NOTE - technically it is NOT directly possible to embed just any old font into a web page - only public domain
TrueType,
OpenType, or
Open Font Format can be used since distribution of licensed fonts is a breach of copyright.
I would strongly recommend using the google library of fonts - since they are both hosted and cached by google - however there are some tools around that do let you create your own woff files based on truetype / open type fonts.
http://orionevent.comxa.com/otf2woff.... is one we have used in the past for a client.
http://people.mozilla.com/~jkew/woff/ also has a command line tool for converting truetype/opentype fonts.
I would however, make on additional comment - font files are NOT small downloads - so think carefully about the number and size of any fonts you want to include as part of your site.
Finally, this format is NOT supported by a number of older browsers so make sure you css font-family definitions include fallback fonts.
Westa
Westa