9Fonts & web fonts


THIS SECTION discusses everything you need to know about getting fonts onto a website. The next chapter discusses how to make the fonts responsive and sets the basic typographical properties needed to make a web site presentable.

In this section I cover how to convert fonts to WOFF†1 files for deployment within the individual pages of the website. I also cover the use of open source fonts, downloading them as, or converting them to, WOFF files for direct use in web pages.

To summarise—just in case this section is not of interest for you (if you are not using your own fonts for example), I cover the following:

  1. Web fonts and font formats

  2. The conversion of the Equity (and other) fonts to WOFF files

  3. Using WOFF files with CSS

  4. Giving fonts a usable name in CSS

  5. Assigning fonts to a CSS selector

  6. The distinction between Equity and open source fonts within this website

  7. The downloading and use of open source fonts

  8. My icon and index fonts

†1 WOFF: web open font format files. This is a standard format used to display fonts on a website; it has been adopted by the World Wide Web Consortium (W3C) and is the recommended approach for embedding fonts. WOFF is a compressed form of either TrueType fonts or OpenType fonts.

End flourish image