As previously covered in this blog, "fancy" font use in web page headlines usually requires no font use at all – a combination of images and creative CSS swaps text out for graphic representation.
The CSS3 language, which is supported at least partially by all modern browsers provides an option to embed actual fonts into a site visitor’s rendered page, presenting headlines as actual text and not as a swapped-and-replaced text/graphic combination. This can be accomplished in just three or four lines of code in a CSS file:
@font-face {
font-family: "Sketch Rockwell";
src: url(../fonts/SketchRockwell-Bold.ttf); /* for IE browsers */
src: local("Sketch Rockwell"), url(../fonts/SketchRockwell-Bold.ttf) format("truetype"); /* for non-IE browsers */}
To have a particular tag or selector use the font you’ve just embedded, the property is such:
h1 { font-family:"Sketch Rockwell";}
It makes sense to include the other font properties here – color, size, margin, line-height, etc can all be applied to the embedded font. It’s also a good idea to list alternate, backup fonts in the “font-family” property:
h1 {color:#603292; font-size:32px; line-height:32px; margin-left:16px; font-family:"Sketch Rockwell", "Trebuchet MS", Trebuchet, Helvetica, sans-serif;}
An example of this CSS can be seen here. The “Vocational Programs” headline is actual text displayed with an embedded font with other properties for size and color.
The above CSS works all the way down to IE6 and works fine on both Safari, Chrome and FF on PC and Safari and FF on the Mac.
A few things to be aware of:
- Firefox does not allow for the importation of fonts that aren’t served on the same machine as the CSS file.
- Know your font licensing rules. Just because you can embed a font doesn’t mean you should – fonts, like other pieces of software are usually not meant to be shared unless the organization your purchased it from offers it as rights free. By including the above CSS in your style sheets, which are accessible to anyone who visits you site, you are also making the font file itself accessible.
- Also consider the font format. There are several formats out there – most modern browsers support just TrueType and OpenType fonts.