• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Webfonts: Demystified
 

Webfonts: Demystified

on

  • 4,369 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,369
Views on SlideShare
3,923
Embed Views
446

Actions

Likes
9
Downloads
101
Comments
1

12 Embeds 446

http://www.designmantic.com 389
http://callelapantomina.blogspot.com.es 20
http://callelapantomina.blogspot.com 14
http://plus.url.google.com 6
http://digg.com 5
http://us-w1.rockmelt.com 3
https://twitter.com 3
http://feedly.com 2
https://translate.googleusercontent.com 1
http://www50.jimdo.com 1
http://speakerrate.com 1
http://translate.googleusercontent.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

11 of 1 previous next

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