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. Webfonts:Demystified@melchoyce
  2. Introduction toWebfonts
  3. We’re in a WebfontRennaissance.Take a look...
  4. Webfonts in the Past1. Web-safe fonts • Arial, Verdana, Georgia, etc.2. Font Replacement • SIFR • Cufon • FLIR
  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. 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. 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. Webfonts in the FutureWhere are we going...?
  9. Webfonts in the FutureMoving away from type: • Icon fonts (awesome because: scalable, easily change color, easily add effects)
  10. Webfonts in the FutureMoving away from type: • Graph fonts (awesome because: magic. ...and previous points)
  11. Finding the RightWebfont
  12. Finding the Right Webfont
  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. 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. 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. 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. 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. 3Webfonts andWordPress
  19. Webfonts and WordPress 3Adding From GoogleWeb FontsTime for a live demo...
  20. Webfonts and WordPress 3Adding From Font SquirrelTime for a live demo...
  21. Webfonts and WordPress 3Adding From TypekitTime for a live demo...
  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. 4WebfontResources
  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. 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. 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. 5Questions?