How to Embed Fonts with the CSS3 @font-face Property

Pin It

For many years website designers were limited to using a small handful of web safe fonts which might or might not have of been part of a persons computer browser.
So the CSS written would specify a “font family”. This would be made up of several similar fonts to be listed as fallback fonts. If the first font didn’t exist then it would go to the next font, and so on until browser’s default sans-serif or monospace font was used. see below for example.

The @font-face rule was first defined in the CSS2 specification, but was later removed from CSS2.1. spec. It’s now back in the CSS3 specification. Here I will show you how to embed a unique font using the CSS3 @font-face rule.

To be able to use unique fonts the “@font-face” property includes a URL link pointing to the uploaded fonts which are kept on your web server. The browser being used will download these fonts into its cache and then use them to style a web page.

Using the @font-face has its advantages. It generates selectable, searchable, translatable and accessible text for those using assistive devices and is search engine friendly when it comes to SEO (Search Engine Optimization). There is no need for the Flash plugin, JavaScript or text based images which have there own assortment of usability issues.

Using the @font-face to style a H1 heading

This tells the browser to use the CartGothic font. If the browser doesn’t recognize the @font-face then the browser goes to the next available font in the font stack. A font stack is the list of fonts declared in the font-family property.

Then, if you want the font to appear in the H1, for example, use:

The downside to using the @font-face is licensing issues and restrictions. They might just look bad when rendered on the Web. Most font licensing restrictions were never written with the @font-face property in mind, therefore most will not even include an @font-face restriction. This doesn’t mean there alright to use though. Apart from this there are many font resources such as (The league of moveable type) on the web which either offer free or to buy fonts which include a @font-face license.

Browser Support for @font-face

  1. Internet Explorer – Partial support for 5.5 to 8.0 Version – Full support for Versions 9.0 to 10
  2. Firefox – Not supported 2.0 and 3.0 versions – Full support for versions 3.5 to 18.0
  3. Chrome – Full Support for Version 4.0 to 26.0
  4. Safari – Not supported 3.1 – Full Support for 3.2 to 6.0
  5. Opera – Not supported for Version 9.0 to 9.5 and 9.6 – Full Support for Version 10.0 to 10.1 and 10.5 to 12.5
  6. iOS Safari – Partial Support for Version 3.2 and 4.0 to 4.1 – Full Support for Version 4.2 to 4.3 5.0 to 5.1 and 6.0
  7. Opera Mini – Not supported 5.0 to 7.0
  8. Android Browser – Not supported 2.1 – Partial Support for 2.2 to 3.0 – Full Support for 4.0 to 4.2
  9. Blackberry – Partial Support for Version 7.0 Browser – Full Support for Version 10.0
  10. Opera Mobile – Full Support for Version 10.0 to 12.1
  11. Chrome for Android – Full Support for Version 18.0
  12. Firefox for Android – Full Support for Version 18.0

Four further ways to embed fonts

The first and very popular way to embed fonts is through Google Web Fonts. This is a relatively quick and easy way to add open source font families to your collection and it works in most browsers. Then we have Typeface. This is another straight forward way of embedding fonts. You will need to add the Typeface.js library script to the head section of your document first and convert fonts to a format that Typface can read before using plain HTML and CSS as normal. The third option is known as Cufon and works in a similar way to TypeFace. The advantages of using Cufon is that it makes your text pretty. The disadvantages are that is makes the text non selectable (annoying for your users and SEO). The fourth and final option is sIFR3 This needs JavaScript, Flash and CSS to get up and running.

Consider Cross Browser Issues and Download Speeds

There are one or two things to consider. Firstly, for full cross browser compatibility with the @font-face property, each of the following web font formats, .eot, .woff, .ttf, and .svg. have to be used. The file formats required for the @font-face can be generated at Font Squirrels Generator. Secondly it is advisable to use three fonts, but no more than five so as to keep the loading times down.

Conclusion

From a personal point of view I will stand by the CSS3@font-face property for future embedding of fonts as this is a W3C standard and is virtually supported by all major browsers at this time, making it ideal for cross-browser presentations in Web design.

How to Embed Fonts with the CSS3 @font-face Property

How to Embed Fonts with the CSS3 @font-face Property

This entry was posted in CSS3, Web design and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  • Contact details

  • Pinterest

    • 67500_50582234614769
    • Stay on the line
    • Zentangle #122 - Ins
    • Stay on the line | I
    • “Curiosity” by René
    • A Perfect Monster: T
    • Synesthesia Garden -
    • santiago caruso
    • santiago caruso
  • Follow Me on Pinterest
  • Recent Posts

  • Category Posts

  • RSS UX Web Design Tutorials

  • Twitter :@stephen_mp
  • Follow

    Get every new post delivered to your Inbox

    Join other followers