using web fonts in word press
TRANSCRIPT
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@[email protected]
http://www.surveymonkey.com/s/7BSS2MWOnly 2 questions!
Your feedback is appreciated
Download these slideshttp://crosscutsoftware.com/2012/06/wcnyc-presentation-on-web-fonts