webfonts: demystified

30
Webfonts: Demystied @melchoyce

Upload: melchoyce

Post on 27-Jan-2015

129 views

Category:

Design


2 download

DESCRIPTION

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

Page 1: Webfonts: Demystified

Webfonts: Demystified

@melchoyce

Page 2: Webfonts: Demystified

Introduction toWebfonts

Page 3: Webfonts: Demystified

We’re in a Webfont Rennaissance.Take a look...

Page 4: Webfonts: Demystified
Page 5: Webfonts: Demystified
Page 6: Webfonts: Demystified
Page 7: Webfonts: Demystified

Webfonts in the Past1. Web-safe fonts

• Arial, Verdana, Georgia, etc.

2. Font Replacement• SIFR

• Cufon

• FLIR

Page 8: Webfonts: Demystified

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-safefonts anymore!

Page 9: Webfonts: Demystified

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');

}

Page 10: Webfonts: Demystified

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 usethem all.

Page 11: Webfonts: Demystified

Webfonts in the FutureWhere are we going...?

Page 12: Webfonts: Demystified

Webfonts in the FutureMoving away from type:

• Icon fonts (awesome because: scalable, easily change color, easily add effects)

Page 13: Webfonts: Demystified

Webfonts in the FutureMoving away from type:

• Graph fonts (awesome because: magic. ...and previous points)

Page 14: Webfonts: Demystified

Finding the Right Webfont

Page 15: Webfonts: Demystified

Finding the Right Webfont

Page 16: Webfonts: Demystified

Finding the Right Webfont

Picking 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.

Page 17: Webfonts: Demystified

Finding the Right Webfont

Picking 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.

Page 18: Webfonts: Demystified

Finding the Right Webfont

Picking 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

Page 19: Webfonts: Demystified

Finding the Right Webfont

Picking 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.

Page 20: Webfonts: Demystified

Finding the Right Webfont

Do 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.

Page 21: Webfonts: Demystified

Webfonts andWordPress

3

Page 22: Webfonts: Demystified

Webfonts and WordPress

Adding From Google Web FontsTime for a live demo...

3

Page 23: Webfonts: Demystified

Webfonts and WordPress

Adding From Font SquirrelTime for a live demo...

3

Page 24: Webfonts: Demystified

Webfonts and WordPress

Adding From TypekitTime for a live demo...

3

Page 25: Webfonts: Demystified

Webfonts and WordPress

Adding 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

3

Page 26: Webfonts: Demystified

Webfont Resources

4

Page 27: Webfonts: Demystified

3Webfont Resources

Where to Find Fonts

4

• Fontdeck• Fonts.com Web Fonts• FontsLive• Font Squirrel• Fontspring• Google Web Fonts• Just Another Foundry• Kernest

• The League of Moveable Type• MyFonts Webfonts• Process Type Foundry• Typekit• Typotheque• Web FontFonts• WebINK• WebType

Page 28: Webfonts: Demystified

3Webfont Resources

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/

4

Page 29: Webfonts: Demystified

3Webfont Resources

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/

4

Page 30: Webfonts: Demystified

Questions?

5