Webfonts: Demystified
Upcoming SlideShare
Loading in...5
×
 

Webfonts: Demystified

on

  • 4,865 views

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.

Statistics

Views

Total Views
4,865
Views on SlideShare
4,173
Embed Views
692

Actions

Likes
10
Downloads
110
Comments
1

12 Embeds 692

http://www.designmantic.com 631
http://callelapantomina.blogspot.com.es 20
http://callelapantomina.blogspot.com 14
http://digg.com 8
http://plus.url.google.com 6
http://us-w1.rockmelt.com 3
https://twitter.com 3
http://feedly.com 2
http://translate.googleusercontent.com 2
http://speakerrate.com 1
https://translate.googleusercontent.com 1
http://www50.jimdo.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Me encanta
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webfonts: Demystified Webfonts: Demystified Presentation Transcript

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