Workshop outline - getting webfonts to work and work well

Warm-up questions

• What’s a webfont?
• What does “work well” mean?

Opening activity (as people arrive)

• Write your warm-up answers on the two posters.

Agenda, big faces

Table scribbles

• What fonts have you used recently?
• Why did you use that font?

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

• What’s 1 thing you learned at the workshop?
• What will you do with what you learned?
• Post on meetup to inspire the other attendees! :)