To achieve cross-browser custom font implementation by only CSS please follow the following steps:

  1. Download the font file to your computer
  2. Go to http://www.fontsquirrel.com/fontface/generator
  3. At the font face kit generator upload your font, check the agreement and then download the converted zip package.
  4. Inside you will find 4 font files (.eot, .svg, .ttf and .woff). Copy the files over to your server
  5. Open the "stylesheet.css" and copy the "@font-face" block over to your css (ie, common.css). This is the font-face declaration.
  6. Use the declared font-face name in any element you want.

The fontface declaration will look something like the following

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

Then anywhere in your css use the font face like

.my-class{
font-family: 'MuseoSlab500';
font-size: 36px;
}
.heading {
font-family: 'MuseoSlab500'
}

For more info and a detailed description on the process, visit:

How to Achieve Cross-Browser @font-face Support

Comments

ron's picture

 

Nice, thanks for sharing Azec.

This can be the alternative of cufon. I remember I used this technique in few other projects year back.

Two points I want to add here which I found while embedding fonts in earlier projects

- relative url doesn't always work, so it is safe to use absolute src path
- so browsing the html file like 'c:\\xamp\project\index.html' will not work, have to be browsed like 'http://project.dev.panth.com/project/index.html'

I think, from our next project we shall gave up cufon (since cufon causes some extra javascript load to clients pc) and start using embedded fonts using this technique

Ron

Add new comment