Using Web Fonts in WordPress

Rindy PortfolioWordCamp 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, 2006via 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 OffSmashing 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

Keep in TouchRindy Portfolio@portfolarindy@tadpole.cc

http://www.surveymonkey.com/s/7BSS2MWOnly 2 questions!

Your feedback is appreciated

Download these slideshttp://crosscutsoftware.com/2012/06/wcnyc-presentation-on-web-fonts