How to use a custom font using CSS3

Break the tradition of using "web-safe" fonts by using CSS3 to embed the font you love into your web pages. Simple CSS3 trick, thanks to W3C

All these years, we always had a problem with adding our own custom fonts to our web pages, well thanks to the upcoming CSS3, we can now include any font of our choice to our web pages. (fonts which are not considered “Web Safe” can be used from now on)

How is this possible ?

As specified in CSS Fonts Module Level 3 document by W3C.org, CSS3 enables the user to use a custom font apart from the usual “web-safe” fonts in his/her web document.

The @font-face rule


/* Syntax  for @font-face*/

@font-face {
font-family: myfont;
src: url( "path to font .ttf, .otf ");
}

h1 { font-family: myfont; }

The @font-face rule allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of “web-safe” fonts, allowing for consistent rendering independent of the fonts available in a given user’s environment. A set of font descriptors define the location of a font resource, either locally or externally, and the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text.

W3C.org

Example

This text uses the Agency FB font

The following image is how Firefox3+, IE7+, Safari 3 should render the above text.

Example of how your browser should render the above text

Code for the above Example


<html>
<head><title>DEMO</title></head>

<style>

@font-face {
font-family: Agency FB;
src: url(http://webdevcodex.com/demos/fonts/agencye.ttf);
font-style:normal; font-weight:200;
}

.mynewfont { font-family: Agency FB; font-size:40px; }

</style>

<body>

<p class="mynewfont">
This text uses the Agency FB font
</p>

</body>
</html>

Conclusion

Remember, although majority of the latest browsers support CSS3 to some extent, the oldies still have issues rendering stuff like this.

About the Author

Michael is a freelance web developer. Fluent with PHP, Ruby on Rails, AJAX, CSS and HTML. Runs his own Web Designing Firm viz Vision Master Designs, who deal with customized solutions for business needs, blog design and development. Currently selected with this year's Google Summer of Code, working with Wordpres. Follow Michael on Twitter

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

5462 ResponsesHow+to+use+a+custom+font+using+CSS32009-07-26+15%3A50%3A44Mike to “How to use a custom font using CSS3”

Reply

Jon August 10, 2009 at 2:10 am

Thanks Michael. Great tip. But what happens to the font if the user's browser doesn't use CSS3? Does one have to add another rule to cover this possibility?
- Reply
  
  Mike August 10, 2009 at 6:03 am
  
  Hey Jon,
  Yes, if User's browser doesn`t support CSS3, then automatically the "serif" font is called upon if no other fonts are mentioned in your style. The best way to do this would be (add more fonts to our custom fonts, if one font fails, then the next one is used)
  
  .mynewfont { font-family: Agency FB,Arial,Tahoma; font-size:40px; }