Your SlideShare is downloading. ×
0
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Webfonts: Demystified
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webfonts: Demystified

5,257

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 …

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
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,257
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
116
Comments
1
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?

×