In the early days of Web development, developers were pretty limited when it came to the choice of font for various elements of the site such as the body text and headings. The common workaround was to input the text in a graphics editor, set the desired font and save the text as an image for later importing. This approach isn’t exactly bandwidth friendly and it can be tedious to make updates to the text. Thanks to CSS3, you can now add custom fonts to your webpage the same way you could embed fonts to a standard document. While it is possible to do this manually, it is likely for the code to not work in certain browsers. These steps make it much simpler.
1. Go Font Hunting
The process of finding a font online hasn’t changed one bit. Just search away using your favorite search engine or check out a font directory and try your luck there. A good tactic would be to search in Web design blogs which may have a few posts that put certain fonts in the spotlight.
2. Honor the EULA
Before you show off your cool text, you should check if the font can really be used for commercial purposes. This should all be stated in the EULA. If you cannot, find out what you need to do in order to use the font on your website. Good fonts take a lot of work to make and these creators definitely deserve support.
3. Upload the Font and Generate the Code
Believe it or not, this is the easiest step and you can give credit to online tools like Font Squirrel that really make it so simple. With the Webfont Generator, you can upload the font you wish to use and generate a code snippet that is sure to work with all the modern browsers. What is interesting about Font Squirrel is that it offers a database full of fantastic fonts that are free to use commercially.