Using custom fonts on your website

Sometimes you want to make your website look better by changing fonts of some elements e.g. headings. When you set element's font you should choose one of so-called 'web safe fonts'. Web safe fonts are the ones that are by default installed on most of the computers, regardless operating system e.g. Arial, Verdana, Times New Roman etc. To increase the chances that the content of your website is displayed to each visitor using fonts you chose you can specify more than one font in your CSS:

.someclass {
  font-family: Arial, Verdana;
}

In this case if the first font is not installed on client's machine the next one will be used.

Custom fonts
In some cases you may need to use a custom font that is most likely not installed on most of the client machines. Common example for such situation is when you receive a design from your client who insists you implement their website exactly like it was designed.

One of possible solutions would be using graphics for all page elements that were designed to use custom fonts. Disadvantages of this approach are:

• This is not SEO friendly
• Not suitable for dynamic text

The other option is to place the the font file on your webserver and using CSS point the browser to the font location:

@font-face {
  font-family: custom_font; 
 
  /* for IE */
  src: url(fonts/custom_font.eot);   

  /* non-IE */
  src: local("Unique font name"), url(fonts/custom_font.ttf) format("truetype");  
}

/* now you can use your custom font like any other */
.someclass {
  font-family: custom_font;
}

Please not that browser needs to download the font first so it may slow down initial loading of your page. For IE you'll need the .eot version of the font. You can convert your ttf font into eot using this free converter. Each browser should only download one of the files.

If possible always try to use web safe fonts which can also produce great results.