Given at the Western MA WordPress meetups, 5/30/12. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.
3. We’re in a Webfont
Rennaissance.
Take a look...
4.
5.
6.
7. Webfonts in the Past
1. Web-safe fonts
• Arial, Verdana, Georgia, etc.
2. Font Replacement
• SIFR
• Cufon
• FLIR
8. Webfonts in the Present
@font-face
• CSS rule made popular in CSS3
• Embed fonts directly onto your site
• Don’t need to worry about browser-safe
fonts anymore!
10. Webfonts in the Present
@font-face formats
1. EOT (IE)
2. WOFF (Modern Browsers)
3. TTF (Safari, Android, iOS)
4. SVG (Legacy iOS)
Note: There’s some overlap -- some browsers support
multiple format options. However, it’s safest to use
them all.
16. Finding the Right Webfont
Picking the Right Service
Figure out your constraints.
• Self-hosted or cloud-hosted?
• Do you need control over your files?
• Can’t add new files to your server?
• Self-hosted: Font Squirrel, Font Spring, etc.
• Cloud-hosted: Google Web Fonts, Typekit, etc.
17. Finding the Right Webfont
Picking the Right Service
Figure out your constraints.
• Free service or pay service?
• Do you have a budget for fonts?
• Hundreds of free fonts, but pay fonts are generally
better quality
• Free services: Google Web Fonts, Font Squirrel, etc.
• Pay services: Typekit, Font Spring, etc.
18. Finding the Right Webfont
Picking the Right Font
Figure out your needs.
• Header font?
• Needs to look good big
• More stylistic freedom -- can use almost any style of font
• Body font?
• Needs to look good at medium to smaller sizes
• Less stylistic freedom -- limited to serif and sans-serif
• Must be very readable and legible
19. Finding the Right Webfont
Picking the Right Font
Figure out your tone.
• What is your site about?
• Who is your audience?
• What are you trying to say?
• Your fonts should match your site’s tone
• Corporate site shouldn’t use Comic Sans. Travel blog
shouldn’t be stiff and formal.
20. Finding the Right Webfont
Do What Feels Right
Picking fonts is highly intuitive.
• What works for some might not work for others
• Some might like structure, while others freedom
• Finding the right can be as organic or structured
as you want it to be.
25. Webfonts and WordPress 3
Adding From WP Plugins
There are many webfont plugins available for WP:
1. Google Web Fonts: typecase, WP Google Fonts
2. Typekit: Typekit plugin for WordPress, Typekit Fonts
for WordPress
3. Fonts.com: Web Fonts, Webfonts
4. Fontsforweb.com: Font - web fonts plugin
6. Multiple: Fontmeister
7. Add to WYSIWYG: Ultimate TinyMCE - Ultimate Google
Webfonts Addon
27. Webfont Resources 4
3
Where to Find Fonts
• Fontdeck • The League of Moveable Type
• Fonts.com Web Fonts • MyFonts Webfonts
• FontsLive • Process Type Foundry
• Font Squirrel • Typekit
• Fontspring • Typotheque
• Google Web Fonts • Web FontFonts
• Just Another Foundry • WebINK
• Kernest • WebType