Neptune Web | Boston-based digital marketing agency: Website Design, Website Services, SEO, Marketing Automation Neptune Web

Using CSS3 to Embed Fonts on Web Pages

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.

 

Neptune Web is a full-service Boston-area interactive web and digital marketing agency with expertise in Website Design, Web Development, Digital Marketing Strategy and Execution.

We look forward to your comments and would be most happy to address and help solve any Digital Marketing or Website Design & Development challenges you may have.

comments powered by Disqus