Date post: | 27-Jan-2015 |
Category: |
Design |
Upload: | tadpole-collective |
View: | 114 times |
Download: | 1 times |
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