Many new methods of font substitution are coming of the wood work and old methods are now getting a second look.
@font-face method
The @font-face method was added to the CSS2 spec but then not recommended in CSS2.1. However with CSS3 it’s back and supported by most popular modern browsers. Read about @font-face at W3.org.
This method requires the font being loaded on the server and will cause a slight flickering of the font rendering while it is stored in the cache. The plus side of this method is it’s easy to implement and requires no JavaScript.
Here is an example of @font-face being used. Click Here
Sample CSS code used (Note: font is stored on the server)
@font-face {
font-family: 'BrushScript';
src: url('BrushScript.ttf') format("truetypefont");
}
/* for IE */
@font-face {
font-family: 'BrushScript';
src: url(BrushScript.ttf);
}
body {
font-family: 'BrushScript', helvetica; /*degrades to a standard web font if unavailable */
font-size:1em;
}
Cufon JavaScript Method
This currently my personal favorite method. No font is stored on the server and there is no flicker of the font while loading. The wizard also provides many options and settings so you can customize the needs for your site.
Easy to add
Cufon provides a simple method for converting fonts on your local machine into a js file that you include in the header along with the Cufon script. A simple replace call is used to substitute the font. Read more about Cufon here
Example Header Code
<script src="cufon-yui.js" type="text/javascript"></script> <script src="AGaramondPro_400-AGaramondPro_700-AGaramondPro_italic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">Cufon.replace('h1');Cufon.replace('p');</script>
Background Image method
This method is good for replacing a few headers and best method to use with the logo of your site. Detailed px to px cross browser look with the design is needed while the code remains semantic. This method has been implemented in this version of my site since for major section H1 headers and the logo of the site.
XHTML Example Code
<h3 id="Portfolio">Portfolio</h3>
CSS Example Code
h3#Portfolio
{
background:url('/portfolio/2009/gfx/title_portfolio-trans.png') no-repeat;
text-indent: -9999px;
width:229px;
height:61px;
}
This will work with all browsers. A list will be added shortly of the other methods and their support.
