using web fonts in wordpress
DESCRIPTION
It used to be that we had to stick to “web-safe” fonts to be sure our site visitors saw the correct font. But now we can store our fonts on the web and serve them to users no matter what they have on their machines.TRANSCRIPT
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