Game Development Reference
In-Depth Information
Web fonts
The new web fonts API is particularly exciting and liberating to all those web deve-
lopers out there who have had to rely on images in order to make the web truly beau-
tiful up until now.
To use custom fonts, we use the CSS property
@font-face
and specify a few at-
tributes, such as the name of the font and the font file, which the browser will follow
and download to the client much like it does with assets such as images, videos, and
sound files that are called by the client.
@font-face {
font-family: "Lemon",
src: url("/fonts/lemon.woff") format("woff");
}
h1 {
font-family: "Lemon", Arial, sans-serif;
}
The only caveat with web fonts is that not all browsers support the same font types.
The solution, though simple, can be a bit of a pain, since it involves uploading the
different file format to your server then specifying each and all of them in the font-
face declaration. When a browser comes across your custom font declaration, it can
then download the file format that it can handle and serve that to the client.
@font-face {
font-family: "Lemon",
src:url("/fonts/lemon.woff") format("woff"),
url("/fonts/lemon.eot") format("eot"),
url("/fonts/lemon.ttf")
format("truetype"),
url("/fonts/lemon.svg#font")
format("svg");
}
