Webfonts: Demystified

download Webfonts: Demystified

of 30

  • date post

  • Category


  • view

  • download


Embed Size (px)


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.

Transcript of Webfonts: Demystified

  • 1. Webfonts:Demystied@melchoyce

2. Introduction toWebfonts 3. Were 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 Dont need to worry about browser-safefonts 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 formats1. EOT (IE)2. WOFF (Modern Browsers)3. TTF (Safari, Android, iOS)4. SVG (Legacy iOS)Note: Theres some overlap -- some browsers supportmultiple format options. However, its safest to usethem 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 eects) 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 les? Cant add new les 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 sites tone Corporate site shouldnt use Comic Sans. Travel blog shouldnt be sti 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 structuredas you want it to be. 18. 3Webfonts andWordPress 19. Webfonts and WordPress3Adding From GoogleWeb FontsTime for a live demo... 20. Webfonts and WordPress3Adding From Font SquirrelTime for a live demo... 21. Webfonts and WordPress3Adding From TypekitTime for a live demo... 22. Webfonts and WordPress3Adding From WP PluginsThere are many webfont plugins available for WP:1. Google Web Fonts: typecase, WP Google Fonts2. Typekit: Typekit plugin for WordPress, Typekit Fonts for WordPress3. Fonts.com: Web Fonts, Webfonts4. Fontsforweb.com: Font - web fonts plugin6. Multiple: Fontmeister7. Add to WYSIWYG: Ultimate TinyMCE - Ultimate Google Webfonts Addon 23. 4WebfontResources 24. Webfont Resources43 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 Resources43 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/uidgrids/ 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 Resources43 Extra Goodies http://letteringjs.com/ http://kernjs.com/ http://ttextjs.com/ http://chengyinliu.com/whatfont.html http://www.typetester.org/ http://fortawesome.github.com/Font-Awesome/ https://www.fontfont.com/how-to-use--chartwell http://www.jfontsize.com/ 27. 5Questions?