Font Squirrel – CSS3 Fonts

If you need a website with a non-standard font, Font Squirrel is the solution!

The important feature of this website is the @font-face Generator. It let you upload a font from your pc and it generate an archive with your font in different formats and a css file. You need only to put the font files into a folder (such as fonts), copy the css code in your css file.

To use the new font you only need to use the “font-family” property:

@font-face {
    font-family: 'FontName';
    src: url('FontName.eot');
    src: url('FontName.eot?#iefix') format('embedded-opentype'),
         url('FontName.woff') format('woff'),
         url('FontName.ttf') format('truetype'),
         url('FontName.svg#StMarieThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { font-family: FontName; }

I tested on the latest major browser:

  • IE 7/8/9
  • Firefox
  • Chrome
  • Safari
  • Opera

The website also contain a list of free commercial fonts you can embed in your pages.

Random posts