Workshop outline - getting webfonts to work and work well

Warm-up questions

Opening activity (as people arrive)

Agenda, big faces

Table scribbles

1. System fonts and font stacks

What are common system fonts? What are “safe” fonts to use?

Tasks: Implement and test a system font stack

2. Webfont hosting services

What are webfonts?

We will look at three hosting options: Typekit, MyFonts, Google Fonts.

Tasks: Implement and test a hosted font stack

3. Self-hosting webfonts

Where to get fonts.

@font-face rules.

Generating webfonts at fontsquirrel.com.

Tasks: Implement and test a self-hosted font stack

4. Best practice for loading fonts

font loading api - mention but we won’t use this

fontfaceobserver - example use

font-display - in the future

Tasks: Implement and test fontfaceobserver

Follow up on Tuesday morning