CSS3 Font Face – BYOF (bring your own font...)

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

Web fonts - a.k.a. “your own fonts in a website?” Nowdays, the @font-face property is a standard technique that has almost full compatibility with all browsers so there is no need to fear using it from a technological point of view.

Syntax

First declare the font family and the path to a file using the @font-face at-rule:

@font-face {
  font-family: _font_family_name_;
  src: url(_path_to_a_font_file_)
    format(_file_format_);
}

Then simply call the font family in standard CSS:

.element {
  font-family: _font_family_name_;
}

File Formats of Web Fonts

If you are not using a cloud-based solution such as Typekit or Google Fonts and you are using your own font files, you need to have at least minimum knowledge of file formats:

  • WOFF (Web Open Font Format) – the predominant file format. However, it is supported by MSIE from version 9 and by Android Browser from version 4.4. caniuse.com/woff
  • TTF/OTF (TrueType/OpenType) – these are two formats which are supported by almost all modern browsers. However, MSIE only supports them from version 9. Furthermore, you have to set the so-called “embedding bits” (embedding permissions in the font’s header) to “installable”. caniuse.com/ttf
  • SVG (SVG vector format defined fonts) – you will need this if you want to support really old versions of iOS Safari browser, i.e. 4.3 and lower. caniuse.com/svg-fonts
  • EOT (Embedded OpenType font) – supported by all Internet Explorers from version 4. You will need this if you want to support IE8 and lower. caniuse.com/eot

Syntax That Will Maximize Compatibility

If you need to support all browsers, the code is a little more complicated:

@font-face {
  font-family: 'MyWebFont';
  /* IE9 in compatibility mode: */
  src: url('webfont.eot');
  src:
    /* IE6-IE8: */
    url('webfont.eot?#iefix')
      format('embedded-opentype'),
    /* All modern browsers: */
    url('webfont.woff')
      format('woff'),
    /* Older Safari, Android, iOS: */
    url('webfont.ttf')
      format('truetype'),
    /* iOS 4.3 and lower */
    url('webfont.svg')
      format('svg');
}

These days, we will most likely need just the WOFF and TTF formats (for Androids) and EOT (for IE8−). But there is a bright future ahead of us. It is call WOFF.

WOFF Is the Future

In a few years, or for that matter, months, the WOFF format will be the only thing we need:

@font-face {
  font-family: 'WebFont';
  src: url('webfont.woff');
}

But be careful. There will always be browsers (and situations) that are not compatible with any of these web font formats. Opera Mini is a good example. Or imagine a situation where a modern browser does not load the web font – let’s say due to a slow mobile internet connection.

Remember that these scenarios might happen and do not forget to define a fallback system font. Here is an example:

.element {
  font-family: 'WebFont', Georgia, sans-serif;
}

Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more