History of web fonts

In the CSS1 specification, browsers can only display fonts that are present on the user’s system. This is the reason why the font-family attribute accepts a list of fallback fonts in case the first font is not recognized.

In 1996, Microsoft delivered for free a pack of fonts: Core fonts for the Web. They are now outdated, but you surely know some of them:

  • Arial
  • Comic Sans
  • Courier New
  • Times New Roman
  • Verdana

There also exists five categories of fonts that are often used as fallback fonts:

  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy

CSS2 specification has given birth to a new property: @font-face.

This property allows you to use new fonts, compatible with all current browsers, thanks to the management of various formats:


Name Format Details Support
Embedded OpenType fonts EOT Supported only by Internet Explorer 4.47%1
Scalable Vector Graphics fonts SVG Deprecated, supported only by Safari 28.35%1
TrueType and OpenType fonts TTF and OTF Old formats supported by almost all browsers (except IE) 94.53%1
Web Open Font Format WOFF Most recent format, recommended to use (the equivalent of TTF/OTF, but compressed) 93.76%1
Web Open Font Format 2 WOFF2 New format, not yet supported by all browsers (better compression) 74.49%1

Since 2010, Google has given access to a great number of free and open source fonts that are very easy to integrate to any website: https://fonts.google.com/.

Example

Let’s imagine I have created or downloaded a font called WebFont, and I want to use it by default for all the texts used on my website:

@font-face {
  font-family: 'WebFont';
  src: url('/fonts/webfont.eot'); /* IE9 Compat Modes */
  src: url('/fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('/fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/webfont.svg') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

body {
  /* If my browser does not find or cannot read my font,
     it will automatically fallback on the sans-serif category */
  font-family: 'WebFont', sans-serif;
}

If the font exists in different variations (bold, italic, etc.), it is possible to declare them all under the same name. This will allow to automatically apply a style to all elements with the type bold (strong, b) and/or italic (em, i):

@font-face {
  font-family: 'WebFont'; /* Make sure to keep the same name here! */
  src: url('/fonts/webfont-bold.eot');
  src: ...; /* State all formats here */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'WebFont'; /* Make sure to keep the same name here! */
  src: url('/fonts/webfont-italic.eot');
  src: ...; /* State all formats here */
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'WebFont'; /* Make sure to keep the same name here! */
  src: url('/fonts/webfont-bold-italic.eot');
  src: ...; /* State all formats here */
  font-weight: bold;
  font-style: italic;
}
<p>Text using the default font.</p>
<p><strong>Text using the bold font.</strong></p>
<p><em>Text using the italic font.</em></p>
<p><strong><em>Text using the bold italic font.</em></strong></p>
<p><em><strong>Text using the bold italic font.</strong></em></p>

It is of course possible to define utility classes in order to apply the bold and/or italic style to any element:

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}
<p class="bold">Text using the bold font.</p>
<p class="italic">Text using the italic font.</p>
<p class="bold italic">Text using the bold italic font.</p>

  1. Global support at the time this post was written.  2 3 4 5

Responsive e-mails: tips and tricks

Creating a responsive e-mail may give you strong headaches. There are so many things to deal with!It is even more frustrating and time-c...… Continue reading

Firsts steps in SAML 2.0

Published on November 11, 2016

Oauth2, the movie

Published on July 26, 2016