The document discusses how to use web fonts in WordPress themes. It covers what web fonts are, the benefits of using them, and how to implement them through services like Google Fonts or by self-hosting fonts using @font-face kits. The document provides tips on setting up web fonts in WordPress themes and pointers for further learning on web typography topics.

1. Using Web Fonts in WordPress
Rindy Portfolio
WordCamp New York City
June 9, 2012

2. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
Summary
● What web fonts are
● Why they are awesome
● How to use them in your themes
● Further discovery

3. 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!
Who I am not
● A design expert
● A typography expert

4. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
"Web Design is 95%
Typography"
-Oliver Reichenstein, Information Architects, 2006
via Sara Cannon, WCNYC 2010

5. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
The Old Days
Any font you want, as long as it's web-safe
font-family: Arial, Verdana, sans-serif;

6. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
The Next Step
Embedding text in images
Drawbacks
● Images are heavier than text
● Changes to text must be made in image editor
● Less accessible

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

8. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
@font-face
● The technique that saved us

9. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
Options
● Commercial services
● Free services
● Do It Yourself!

10. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
Commercial Services
@font-face Face Off
Smashing magazine review (2010)
A List Apart resources

11. 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?

12. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
@font-face Face Off

13. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
Free Services
Google Web Fonts
Font Squirrel

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

15. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
Font Squirrel
● Download the fonts that you want
● @font-face kits!

16. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
Do It Yourself - Font Squirrel
● Generate your own @font-face kit

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

18. 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!

19. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
Further Discovery
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

20. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio
Your feedback is appreciated
http://www.surveymonkey.com/s/7BSS2MW
Only 2 questions!
Download these slides
http://crosscutsoftware.com/2012/06/wcnyc-presentation-on-web-fonts
Keep in Touch
Rindy Portfolio
@portfola
rindy@tadpole.cc