Using custom fonts in web
Have you ever wanted to use custom, “fancy” fonts (like the ones you have installed yourself on your system, or your designer may have used in some slick layout), in your web pages, but were forced to use images of that writing, instead? Well, whine no more…
Today I’ll give you a short (but comprehensive) insight into how you can build-in custom fonts into any webpage. It’s only a matter of CSS (and its less-familiar @font-face syntax). That is,
@font-face {
font-family: ‘Custom family name’;
src: url(‘/path/to/customfont.eot’);
src: local(‘Full System Custom Font Name’), local(‘PostScript Custom Font Name’), url(‘/path/to/customfont.ttf’);
}
So what does all this mean? Well, the “@font-face” block allows you to define new font families (you know – the things that enable you to write with a certain font face in certain web page elements…). Its font-family property is where you define the new font family’s name (custom, of course, since your users will most probably not have your fancy font installed).
The first src property is meant for embedding the EOT type font. You will get such a font file, for your special fancy font, using a font converter, of course. The best I found is Font Squirrel, but there are others (both online and offline). You just upload in your existing font, and it will output any font you might need for different browser types (it even embeds the font into CSS, so you won’t have to walk around with different external font files). EOT (Embedded OpenType) is the only font format Internet Explorer recognize (so far), and it’s the only way of displaying custom fonts in IE (of course… it HAD to be “special”!).
The following src property is meant for overwriting the first one (by those browsers that use TrueType fonts – that is, everyone BUT Internet Explorer), and it uses a “normal” TTF type font as the custom font family face. The “local” parameters are used in case your visitors actually HAVE your font installed on their systems (they represent, correspondingly, the system’s font name, and the PostScript font name – for such browsers as Safari under OS X).
REMEMBER! Always use this order when declaring fonts (first Internet Explorer’s EOT type, then the other browsers’ TTF / OTF types), otherwise they will overlap, and you will only be able to see the custom font in Internet Explorer…
This being told… that’s it! You may now use this custom web font in any of your web page elements, just as
…
font-family: ‘Custom family name’, ‘Regular font’, etc…;
…
You can read more about embedding custom fonts in web pages here and here.