How to Use Cross Browser Web Fonts, Part 1

Share this article

Greetings, readers! This week I’m exploring web fonts, looking at the best way to use custom fonts on your site across browsers. I’m going to start with some basic explanations so we all know what we’re talking about, then I’ll move on to some more advanced aspects in the following article.

Introduction

Using custom fonts on the Web (outside of the usual web-safe font set) was a complete pain for many years, with web designers having to resort to using weird text replacement techniques like image replacement or siFR, which proved to be hackish and inflexible. But, no more! Since the CSS Fonts Module Level 3 gained widespread support across browsers, things have been much improved. Hell, web fonts even work as far back as IE5.5. Let’s explore web fonts some more.

Basic web fonts syntax

At its core, the web fonts system relies on two things.

1. The @font-face rule

First you insert a block in your CSS, describing a web font you want to embed into your page. This information is all wrapped inside a @font-face block, like so:
@font-face {
	...
}
This should go at the top of your CSS: you want to make sure the font has been made available before you try to apply it to any text. First, we include a font-family name, to identify the font in our CSS. This can be just about any name you like, as long you use it consistently (if the name has spaces in it, you need to include quotes around the name):
@font-face {
  font-family: Abril;
}
Note: Abril Fatface font can be found on Font Squirrel, a great source of free web fonts. Next, you need to include the location of the font file you want to include on your page:
@font-face {
  font-family: 'Abril Fatface Regular';
  src: url("AbrilFatface-Regular.otf");
}
Note that you can include a series of locations in this line, separated by commas:
src: local('Abril Fatface Regular'), url("AbrilFatface-Regular.otf"), url("AbrilFatface-Regular.eot");
The browser goes through the choices in order, and finds the first one that works for it. In this case, we are asking the browser to first check whether the font is installed locally and use the local version if available (useful for potentially saving some bandwidth.) Next, we include a reference to an Open Type format font, then lastly we include an Embedded Open Type version for old versions of IE to use (this is all they understand.) Be aware that you can’t point to a font on a different domain, unless you use CORS (see an Apache-specific solution on David Walsh’s site) That’s it for the essentials; our font should now be usable on our web page.

2. Standard font-family declaration

Now we’ve embedded the font into your page, applying it to some text is as simple as using the font-family declaration, just like we would normally:
h1 {
  font-size: 8em;
  font-family: 'Abril Fatface Regular', sans-serif;
}
See my first example for the above code in action.

Other @font-face options

There are a number of other options you can include in your @font-face rule:
@font-face {
  font-family: 'Abril Fatface';
  src: url("AbrilFatface.otf");
  font-weight: bold;
  font-style: italic;
  font-stretch: condensed;
  unicode-range: U+0026;
}
The font-* descriptors are for use when many different variants of a font are available in a single file. Here for example we are specifying that we’d like to use the bold, italic, condensed variant of the font, if it is available, rather than the browser downloading the whole lot. The unicode-range descriptor specifies what glyphs from inside the font-file you want to use. U+0026
is the unicode for the ampersand (&), meaning that in this case only the ampersand would be downloaded from this font file for use on the page. This is a good technique for saving bandwidth when you only want to use a very specific character set in that font. For more details, read https://www.w3.org/TR/css3-fonts/#font-prop-desc and https://www.w3.org/TR/css3-fonts/#unicode-range-desc

The cross browser reality

The reality of getting web fonts to work across browsers is a little different. Different browsers support a slightly different set of font formats, so you need to provide a set of alternatives.
  • Web Open Font Format (.woff): For all modern browsers
  • Embedded Open Type: For older versions of Internet Explorer (IE< =8)
  • SVG fonts: For older versions of iOS Safari (3.2-4.1)
  • Truetype fonts: For older versions of the default android browser
The @font-face rule in my second, cross browser example looks like this:
@font-face {
  font-family: 'abril_fatfaceregular';
  src: url('abrilfatface-regular-webfont.eot');
  src: url('abrilfatface-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('abrilfatface-regular-webfont.woff') format('woff'),
       url('abrilfatface-regular-webfont.ttf') format('truetype'),
       url('abrilfatface-regular-webfont.svg#abril_fatfaceregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
This is pretty ugly, but fortunately you don’t need to generate it yourself: online resources like Font Squirrel have easy-to-use generators that take a font file, and generate all the alternative format files and CSS you need. In the next part, we’ll get a little more advanced. Note: If you really want to know why all this works, read Paul Irish’s Bulletproof @font-face syntax.

Frequently Asked Questions on Using Cross-Browser Web Fonts

What are the benefits of using cross-browser web fonts?

Cross-browser web fonts offer several advantages. They allow for a consistent, high-quality typographic experience across different browsers and devices. This means that your website or web application will look and feel the same, regardless of the browser or device your audience is using. Additionally, they give you access to a wider range of typefaces than the standard system fonts, enabling you to better align your typography with your brand identity and design aesthetics.

How do I ensure that my web fonts are compatible with all browsers?

To ensure compatibility across all browsers, you should use a variety of font formats. The most common formats include TrueType Fonts (TTF), Web Open Font Format (WOFF), and Embedded OpenType (EOT). By providing multiple formats, you can ensure that if one format isn’t supported by a particular browser, another format will be used instead.

How can I host web fonts locally?

Hosting web fonts locally involves downloading the font files and adding them to your project’s directory. You then need to declare these fonts in your CSS using the @font-face rule. This rule specifies the name of the font, the location of the font file, and the font format.

What is the @font-face rule and how do I use it?

The @font-face rule is a CSS rule that allows you to specify your own font for text in your webpage. You can use it by declaring the rule in your CSS file and providing the name of the font, the source of the font file, and the font format.

How do I use Google Fonts in my web project?

Google Fonts provides a simple and efficient way to incorporate web fonts into your project. You can select the font you want to use, and Google Fonts will generate a link or a CSS rule that you can add to your HTML or CSS file.

What are the performance implications of using web fonts?

While web fonts can enhance the visual appeal of your website, they can also impact its performance. Web fonts increase the size of your webpage, which can lead to longer load times. To mitigate this, you can optimize your font files, use font loading strategies, or limit the number of different fonts used on your site.

How can I optimize web fonts for performance?

There are several strategies for optimizing web fonts. These include subsetting your fonts to include only the characters you need, compressing your font files, using font loading strategies to prevent render-blocking, and hosting your fonts locally to reduce DNS requests.

What is font subsetting and how can it improve performance?

Font subsetting involves removing unnecessary characters from a font file, thereby reducing its size. This can significantly improve your website’s load time, especially for large font files. There are various online tools available that can help you subset your fonts.

How do I handle fallback fonts?

Fallback fonts are used when the primary web font fails to load or is not supported by the browser. You can specify fallback fonts in your CSS by listing them in order of preference, separated by commas, after your primary font.

What are some best practices for using web fonts?

Some best practices for using web fonts include optimizing for performance, providing fallback fonts, testing across different browsers and devices, and considering accessibility. It’s also important to respect the licensing terms of the fonts you use.

Chris MillsChris Mills
View Author

Chris Mills is a senior tech writer at Mozilla, where he writes docs and demos about open web apps, Firefox OS, and related subjects. He loves tinkering around with HTML, CSS, JavaScript and other web technologies, and gives occasional tech talks at conferences and universities. He used to work for Opera and W3C, and enjoys playing heavy metal drums and drinking good beer. He lives near Manchester, UK, with his good lady and three beautiful children.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week