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.

1. Webfonts:
Demystified
@melchoyce

2. Introduction to
Webfonts

3. We’re in a Webfont
Rennaissance.
Take a look...

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!

9. Webfonts in the Present
@font-face syntax
@font-face {
font-family: 'Awesome Font';
src: url('awesome-font.eot');
src: url('awesome-font.eot?#iefix') format('embedded-opentype'),
url('awesome-font.woff') format('woff'),
url('awesome-font.ttf') format('truetype'),
url('awesome-font.svg#svgFontName') format('svg');
}

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.

11. Webfonts in the Future
Where are we going...?

12. Webfonts in the Future
Moving away from type:
• Icon fonts (awesome because: scalable, easily change color, easily add effects)

13. Webfonts in the Future
Moving away from type:
• Graph fonts (awesome because: magic. ...and previous points)

14. Finding the Right
Webfont

15. Finding the Right Webfont

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.

21. 3
Webfonts and
WordPress

22. Webfonts and WordPress 3
Adding From Google
Web Fonts
Time for a live demo...

23. Webfonts and WordPress 3
Adding From Font Squirrel
Time for a live demo...

24. Webfonts and WordPress 3
Adding From Typekit
Time for a live demo...

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

26. 4
Webfont
Resources

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

28. Webfont Resources 4
3
Some Good Articles
• http://webfonts.myfonts.com/webfonts-know-how/what-are-webfonts-0
• http://webtypography.net/
• http://www.adobe.com/devnet/html5/articles/web-typography-and-css-
font-face.html
• http://www.alistapart.com/articles/fonts-at-the-crossing/
• http://www.alistapart.com/articles/fluidgrids/
• http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-
practical-guide-to-typography-on-the-web/
• http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
• http://boldperspective.com/2011/how-to-use-css-font-face/

29. Webfont Resources 4
3
Extra Goodies
• http://letteringjs.com/
• http://kernjs.com/
• http://fittextjs.com/
• http://chengyinliu.com/whatfont.html
• http://www.typetester.org/
• http://fortawesome.github.com/Font-Awesome/
• https://www.fontfont.com/how-to-use-ff-chartwell
• http://www.jfontsize.com/

30. 5
Questions?