Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## Fonts

Two ways to deal with fonts:

- Rely on system fonts
- Use web fonts to deliver font definition as part of the resources loaded by a page
  - load the font definition
  - use in "font-family" CSS property

Note:

- hosted fonts or our fonts
- multiple ways of loading fonts
  - `@font-face` in CSS
  - `link` element in `head` of HTML
  - JavaScript
- multiple font formats
  - Web Open Font Format (WOFF and WOFF2)
    See: Can I use woff?
  - Embedded Open Type (EOT)
  - Open Type Font and True Type Font (OTF / TTF)
  - Scalable Vector Graphics (SVG / SVGZ)

More resources:

- Web Fonts: They're Awesome! from muledesign.com
- Using @font-face from css-tricks.com

Copyright © David Heitmeyer