I’ve blogged in the past on the ability to use a lot more fonts in your website designs. As fast as the resources and support of web fonts is growing, you should think about moving in this direction. And, if you’re ready to go down this path, you’ll go nuts without this great resource > Font Squirrel.com (FS). Sorry couldn’t resist!
Not only does Font Squirrel offer access to a nice library of free fonts, it also offers an important resource for the creative director keen to express a distinctive/branded font style on his or her website. It’s what FS calls an @font-face generator.
In order for fonts (only true type and open type fonts can be used) to display correctly on the web they have to be converted into files supported by the various browsers now being used. Those file types include .eot (IE browsers), .woff (IE 9+, FireFox, and Chrome), .svg (Safari browsers before ver. 4.2), and web TTF for screen rendering. @font-face generator takes your fonts, converts them into each of these files and packages them nicely so that they’re easy to upload on to your website. I’ll add the encouragement here that you should only use fonts that you have a license to use. While most fonts work, there are some font families that FS can’t convert because it has been prohibited from doing so by the font owner.
Once you have uploaded the files add the following to your css web style sheet:
font-family: ‘NAME OF THE FONT’;
src: url(‘PATH/FONTFILE GENERATED BY FS.eot’);
src: url(‘PATH/FONTFILE GENERATED BY FS.eot?#iefix’) format(’embedded-opentype’), url(‘PATH/FONTFILE GENERATED BY FS.woff’) format(‘woff’),
url(‘PATH/FONTFILE GENERATED BY FS.ttf’) format(‘truetype’),
url(‘PATH/FONTFILE GENERATED BY FS.svg’) format(‘svg’);
OTHER FONT STYLING
And with those relatively easy steps, you’ve taken a giant leap toward giving your website the distinctiveness of your brand and, more importantly, standing out from the sea of Verdana, Arial, and Times that currently overwhelms the web.