Webfonts: Demystified


Published on

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.

Published in: Design, Technology, Art & Photos

Webfonts: Demystified

  1. 1. Webfonts:Demystified@melchoyce
  2. 2. Introduction toWebfonts
  3. 3. We’re in a WebfontRennaissance.Take a look...
  4. 4. Webfonts in the Past1. Web-safe fonts • Arial, Verdana, Georgia, etc.2. Font Replacement • SIFR • Cufon • FLIR
  5. 5. 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!
  6. 6. 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); }
  7. 7. 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.
  8. 8. Webfonts in the FutureWhere are we going...?
  9. 9. Webfonts in the FutureMoving away from type: • Icon fonts (awesome because: scalable, easily change color, easily add effects)
  10. 10. Webfonts in the FutureMoving away from type: • Graph fonts (awesome because: magic. ...and previous points)
  11. 11. Finding the RightWebfont
  12. 12. Finding the Right Webfont
  13. 13. Finding the Right WebfontPicking the Right ServiceFigure 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.
  14. 14. Finding the Right WebfontPicking the Right ServiceFigure 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.
  15. 15. Finding the Right WebfontPicking the Right FontFigure 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
  16. 16. Finding the Right WebfontPicking the Right FontFigure 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.
  17. 17. Finding the Right WebfontDo What Feels RightPicking 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.
  18. 18. 3Webfonts andWordPress
  19. 19. Webfonts and WordPress 3Adding From GoogleWeb FontsTime for a live demo...
  20. 20. Webfonts and WordPress 3Adding From Font SquirrelTime for a live demo...
  21. 21. Webfonts and WordPress 3Adding From TypekitTime for a live demo...
  22. 22. Webfonts and WordPress 3Adding From WP PluginsThere 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
  23. 23. 4WebfontResources
  24. 24. 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
  25. 25. 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/
  26. 26. 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/
  27. 27. 5Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.