CSS Web Font cross browser adventures

Web typography is evolving.

Today there is a thing called Web Fonts, which essentially are typefaces that do not need to be installed in the computer of the person who is browsing the given web page. Possibly a new version of a browser, which changes its @font-face support? The support status for widely used brosers can be viewed at caniuse.com.

Check out Bulletproof @font-face Syntax by Paul Irish.

A tool for creating a custom font from SVG files, fontcustom uses the following collection of rules:

@font-face {
  font-family: "fontcustom";
  src: url("fontcustom.eot");
  src: url("fontcustom.eot?#iefix") format("embedded-opentype"),
    url("fontcustom.woff") format("woff"),
    url("fontcustom.ttf") format("truetype"),
    url("fontcustom.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "fontcustom";
    src: url("fontcustom.svg#fontcustom") format("svg");
  }
}

The different font file formats are supported by different (desktop) browser vendors:

  • eot: only IE, from 6.0
  • ttf: all, except IE from 9, if set to installable…
  • woff: all, IE from 9

The SVG version is essentially needed for mobile browsers, namely Webkit-based.

Thus, simply using src: url("fontcustom.woff") format("woff"); should make the font available in all recent/modern desktop browsers.