Webfonts: Demystified

Webfonts: Demystified

@melchoyce

Introduction toWebfonts

We’re in a Webfont Rennaissance.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-safefonts 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 usethem 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 Right Webfont

Finding the Right Webfont

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.

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.

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

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.

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.

Webfonts andWordPress

3

Webfonts and WordPress

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

3

Webfonts and WordPress

Adding From Font SquirrelTime for a live demo...

3

Webfonts and WordPress

Adding From TypekitTime for a live demo...

3

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

Webfont Resources

4

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

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

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

Questions?

5