using web fonts in wordpress

Using Web Fonts in

WordPress

Rindy Portfolio

WordCamp New York City

June 9, 2012

Summary

• What web fonts are

• Why they are awesome

• How to use them in your themes

• Further discovery

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Who I am

• Just another guy using WordPress

• Started CrosscutSoftware.com in 2009

• Tadpole Collective - Tadpole.cc launching today!

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Who I am not

• A design expert • A typography expert

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

"Web Design is 95%

Typography"

-Oliver Reichenstein, Information Architects, 2006

via Sara Cannon, WCNYC 2010

The Old Days

Any font you want, as long as it's web-safe

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

font-family: Arial, Verdana, sans-serif;

The Next Step

Embedding text in images

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Drawbacks • Images are heavier than text • Changes to text must be made in image editor • Less accessible

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Web Fonts to the Rescue

• The somewhat obvious solution:

• Serve fonts from the server, just like everything else on the web

• Hesitancy based on copyrights, rendering

• TrueType (.ttf), Open Type (.otf) Embedded OpenType (.eot) and Web Open Font Format (.woff) are formats designed to address these issues

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

@font-face

• The technique that saved us

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Options

• Commercial services

• Free services

• Do It Yourself!

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Commercial Services

@font-face Face Off

Smashing magazine review (2010)

A List Apart resources

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Commercial Considerations

• Price - not just the cost but the model

• Available fonts

• Delivery method

• Ease of setup - is there a WP plugin?

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

@font-face Face Off

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Free Services

Google Web Fonts

Font Squirrel

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Google Fonts

• Choose the fonts you want by adding them to your "collection"

• Google generates the code

• Add this to your site's code - HTML or CSS

• OR, use the WP Google Fonts plugin

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Font Squirrel

• Download the fonts that you want

• @font-face kits!

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Do It Yourself - Font Squirrel

• Generate your own @font-face kit

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

@font-face kit contents

• Font files into a font folder within your theme • Stylesheet lines copied into your style.css • Don't forget to update the paths

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Tips

• When testing, be sure your site is calling the web font, and not your local copy

• You are responsible for following the EULA • Watch out for bold and italic • Keep learning!

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

http://en.wikipedia.org/wiki/Web_typography http://en.wikipedia.org/wiki/TrueType http://en.wikipedia.org/wiki/OpenType http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Web_Typography) http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ http://nicewebtype.com/notes/2009/10/20/where-to-get-web-fonts/ http://paulirish.com/2010/font-face-gotchas/ http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://www.fontsquirrel.com/forum/discussion/129/eulas-end-user-licenses-agreements

Further Discovery

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Addendum This information was added after the presentation. Thanks to David Balogh (@r303blue) and Hugo Baeta (@hugobaeta) for their generous help! :) • Check Robert Bringhurst's book The Elements of Typographic Style, and a

companion website for web typography: http://webtypography.net/intro/ • Font weights can be tricky. The standard regular is 400 with bold being 700.

David Balogh took Font Squirrel's Open Sans fontkit and modified its demo using font-family and numerical weights, and made it available on his dropbox: https://www.dropbox.com/s/imhb6xdap0pl1hm/open-sans-fontfacekit%20%28DB_Mod%29.zip

• Font Managers for mocks in design programs (plenty others…): o Suitcase o Linotype FontExplorer o Apple's Default Fontbook

• Cufon is a kind of vector image replacement for font files - web fonts kind of overtook the technology and it never really caught on.

• My Fonts does a great job of collecting fonts from several sources and has them tagged based on style - useful for searching!

Using Web Fonts in WP | WCNYC 2012 | Rindy

Portfolio

Keep in Touch

Rindy Portfolio @portfola

rindy@tadpole.cc