Using Custom Fonts on a Page

1. Font-family

The fonts you can use on a web page are limited to the handful of fonts already installed on the PC the browser is running on.

Windows operating system, Chinese fonts:

SimHei (Hei)
SimSun (Song)
NSimSun (New Song)
FangSong (FangSong)
KaiTi (Kai)
FangSongGB2312 (FangSong GB2312)
KaiTiGB2312 (Kai GB2312)
Microsoft YaHei

OS X operating system, Chinese fonts:

Hiragino Sans GB
STXihei
STHeiti
STKaiti
STSong
STFangsong

This raises a question: how do you make a page render a predictable font?

font-family provides exactly this by letting you specify multiple fonts. The one listed first is preferred; when it cannot be found, the next one is used. The CSS below specifies Microsoft YaHei on Windows and STXihei on OS X.

1
font-family: "Microsoft YaHei", STXihei;

For compatibility, a font-family usually lists both the English and the Chinese name, for example: font-family: “Microsoft YaHei” , “微软雅黑” , STXihei, “华文细黑”.

2. Font-face

The @font-face rule is a CSS module used to make web-page fonts diverse. Designers can specify any font they like, with no need to consider whether it is installed on the browser’s PC.

The downside is that font files can be very large and require extra HTTP connections, both of which slow down page loading.

2.1 Syntax

Syntax:

1
2
3
4
5
6
@font-face {
      font-family: <YourDefineFontName>;
      src: <url> [<format>],[<source> [<format>]], *;
      [font-weight: <weight>];
      [font-style: <style>];
}

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* 引入字体 */
@font-face {
  font-family: "defineName";
  src: url("../fonts/singlemalta-webfont.eot");
  src:
    url("../fonts/singlemalta-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/singlemalta-webfont.woff") format("woff"),
    url("../fonts/singlemalta-webfont.ttf") format("truetype"),
    url("../fonts/singlemalta-webfont.svg#defineName") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* 使用字体 */
body {
  font-family: defineName;
}

Note that the src resource can be written in two ways:

One is a relative path, ../font/abc.ttf
The other is an absolute path, //font.abc.com/static/abc.ttf

2.2 Compatibility

IE6-8: supports only Embedded OpenType (.eot)
Firefox 3.5: supports TrueType (.ttf) and OpenType (.otf)
Firefox 3.6: supports TrueType (.ttf), OpenType (.otf), and WOFF (.woff)
Chrome: supports TrueType (.ttf), OpenType (.otf), WOFF (.woff), and SVG (.svg)
Safari: supports TrueType (.ttf), OpenType (.otf), WOFF (.woff), and SVG (.svg)
Opera: supports TrueType (.ttf), OpenType (.otf), WOFF (.woff), and SVG (.svg)

2.3 Example

Bola-Ocho-ffp.ttf

go3v2.ttf

3. Web Font File Formats

The main web font formats today are WOFF, SVG, EOT, and OTF/TTF.

WOFF, Web Open Font Format

This font format is designed specifically for the web and was developed by Mozilla together with several other major organizations. WOFF fonts usually load faster than other fonts because they use the storage structures and compression algorithms found in OpenType (OTF) and TrueType (TTF) fonts. This format can also carry metadata and licensing information. It is on a trajectory to dominate, because all modern browsers have started to support it.

SVG / SVGZ, Scalable Vector Graphics (Font)

SVG is a font format improved from a vector-graphics format; it is smaller in size than vector graphics and suited to use on mobile devices. Only versions of Safari on the iPhone earlier than 4.1 support it. Neither Firefox nor IE currently supports the SVG font format. Firefox has postponed support for SVG fonts and focused on the WOFF format instead. SVGZ is a compressed version of SVG.

EOT, Embedded Open Type

EOT is an embedded font, a technology developed by Microsoft. It allows an OpenType font to be embedded into a web page with @font-face, downloaded to the browser for rendering, and stored in a temporary installation folder.

TTF, TrueType Font

The most commonly used font format on Windows and Mac systems, its biggest feature is that it is a font based on outline technology defined by a mathematical model, which makes them easier to handle than vector-based fonts and guarantees consistency between screen and print output. At the same time, fonts of this kind, like vector fonts, can be freely scaled and rotated with no worry about jagged edges.

OTF, OpenType, Font

OpenType is a font developed jointly by Microsoft and Adobe, and Microsoft’s IE browser uses it throughout. It is dedicated to replacing TrueType fonts.

4. Font Download

There is also a small tool that embeds a font file into a CSS file as Base64.

5. Automatically Loading the Fonts in Use

5.1 Web Font Loader Overview

The webfontloader project was developed jointly by Google and Typekit and provides font-loading for Google and Typekit fonts. Google’s font network cannot be accessed freely, and Typekit’s fonts are paid.

webfontloader provides 6 callback methods:

1
2
3
4
5
6
7
8
WebFontConfig = {
  loading: function () {}, // loading：在所有字体开始加载时触发
  active: function () {}, // active：在所有字体已渲染时触发
  inactive: function () {}, // inactive：字体预加载失败，无效字体或浏览器不支持加载
  fontloading: function (familyName, fvd) {}, // fontloading：指定字体预加载
  fontactive: function (familyName, fvd) {}, // fontactive：指定字体已渲染
  fontinactive: function (familyName, fvd) {}, //// fontinactive：指定字体预加载失败
};

5.2 Using Web Font Loader

The official example:

1
2
3
4
5
6
7
8
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif'],
    }
  });
</script>

There are of course other configurations: timeout, urls for custom styles, and so on.

6. References

Webfontloader