Explanation: The CSS declarations (@font-face) allows you to specify which fonts you want to use on your web pages. These fonts can be located on your server or elsewhere on the WWW. Keep in mind that not all fonts are licensed to be used on the WWW (verify before using). In the example below, I am hosting the fonts myself.

At a minimum you should consider including the following fonts:

  • eot – Embedded Open type
  • ttf – True Type Font
  • otf – Open Type Font
  • woff – Web Open Font format
  • svg – Scalable Vector Graphics (used more on mobile devices these days)

Example CSS code:

To point to the location of the fonts, one needs to use code like the following:

@font-face {
font-family: ‘ChunkFiveRoman’;
src: url(‘chunkfive-webfont-ChunkFive.eot‘);
src: local(‘☺’), url(‘chunkfive-webfont-ChunkFive.woff‘) format(‘woff’), url(‘chunkfive-webfont-ChunkFive.ttf‘) format(‘truetype’), url(‘chunkfive-webfont-ChunkFive.svg#’) format(‘svg’);
font-weight: normal;
font-style: normal;

To then use the font (n this case, ChunkFiveRoman), one just needs to indicate the font family. Of course, it is always a good idea to provide fallback (or use a JavaScript framework to gracefully degrade)..

p {

Example pages (view the source code):

Font-sources (keep in mind not all fonts are licensed to be used on the WWW):

Font Tools:


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.