How to embed CSS cross browser fonts using CSS3

7 Jun 2011 | Posted by: Keir Cleland
How to embed CSS cross browser fonts using CSS3

 

Being able to embed whichever font you wish is the dream of web developers everywhere. No more time consuming excursions into photoshop to cut up page titles or navagation elements. Well, with CSS3 this dream is now a reality... sort of. 
 
It is actually a very simple job to implement embedded fonts like this :

I'm an embedded css3 font
Another css3 font!
css is great 
@font-face {  
font-family: yourFontName ;  
src: url( path/to/file/FONTNAME.ttf ) format("truetype");  
}

Once you've defined your font all you need to do is use it like you would any other standard font family

 
.fontclass { font-family: FONTNAME , verdana, helvetica, sans-serif;  
}

As you may expect, there are a few caveats to using this. Whilst IE does support the font-face element it is only able to use "Embedded OpenType" fonts (eot). Not the end of the world, but you'll just have to convert your TTF to EOT.

@font-face {  
  font-family: " CREATED FONTNAME ";  
  src: url( path/to/file/FONTNAME.eot ); /* IE */  
  src: local(" FONTNAME "), url(path/to/file/FontFileName.ttf ) format("truetype"); /* non-IE */  
}

 

Please rate this article

Click the stars below to give this article a mark out of 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 5 / 10


Related Articles

PHP upload progress bar
7 Apr 2010 | Posted by: Paul Whittington
Creating a php upload progress bar in PHP is notoriously difficult...
91% rating, 0 comments



Post your comments...

We would really appreciate any comments or additions that you have. Include a link in your comment and if we think your comment is appropriate we will publish it. If found this article in any way useful we would really appreciate you bookmarking the page with any of the social bookmarking links provided.



Name:
(optional, shown on site)
Email:
(optional, never shown on site)
Code:
(case sensitive)		 captcha
Your feedback: