Using Web Fonts in   WordPress     Rindy Portfolio WordCamp New York City      June 9, 2012
Using Web Fonts in WP | WCNYC 2012 | Rindy                          PortfolioSummary•   What web fonts are•   Why they are...
Using Web Fonts in WP | WCNYC 2012 | Rindy                                  Portfolio  Who I am•    Just another guy using...
Using Web Fonts in WP | WCNYC 2012 | Rindy                                   Portfolio"Web Design is 95%   Typography"   -...
Using Web Fonts in WP | WCNYC 2012 | Rindy                              PortfolioThe Old DaysAny font you want, as long as...
Using Web Fonts in WP | WCNYC 2012 | Rindy                               Portfolio The Next StepEmbedding text in imagesDr...
Using Web Fonts in WP | WCNYC 2012 | Rindy                           PortfolioWeb Fonts to the Rescue•   The somewhat obvi...
Using Web Fonts in WP | WCNYC 2012 | Rindy                           Portfolio@font-face•   The technique that saved us
Using Web Fonts in WP | WCNYC 2012 | Rindy                          PortfolioOptions•   Commercial services•   Free servic...
Using Web Fonts in WP | WCNYC 2012 | Rindy                                  PortfolioCommercial Services@font-face Face Of...
Using Web Fonts in WP | WCNYC 2012 | Rindy                             PortfolioCommercial Considerations•   Price - not j...
Using Web Fonts in WP | WCNYC 2012 | Rindy                      Portfolio@font-face Face Off
Using Web Fonts in WP | WCNYC 2012 | Rindy                   PortfolioFree Services                       Google Web Fonts...
Using Web Fonts in WP | WCNYC 2012 | Rindy                                 PortfolioGoogle Fonts•   Choose the fonts you w...
Using Web Fonts in WP | WCNYC 2012 | Rindy                           PortfolioFont Squirrel•   Download the fonts that you...
Using Web Fonts in WP | WCNYC 2012 | Rindy                           PortfolioDo It Yourself - Font Squirrel•   Generate y...
Using Web Fonts in WP | WCNYC 2012 | Rindy                                Portfolio@font-face kit contents • Font files in...
Using Web Fonts in WP | WCNYC 2012 | Rindy                               PortfolioTips • When testing, be sure your site i...
Using Web Fonts in WP | WCNYC 2012 | Rindy                                                                  Portfolio  Fur...
Using Web Fonts in WP | WCNYC 2012 | Rindy                                                        Portfolio  AddendumThis ...
Using Web Fonts in WP | WCNYC 2012 | Rindy             PortfolioKeep in Touch  Rindy Portfolio    @portfolarindy@tadpole.cc
Upcoming SlideShare
Loading in …5
×

Using Web Fonts in WordPress

3,401 views
3,309 views

Published on

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.

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,401
On SlideShare
0
From Embeds
0
Number of Embeds
412
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Using Web Fonts in WordPress

  1. 1. Using Web Fonts in WordPress Rindy Portfolio WordCamp New York City June 9, 2012
  2. 2. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioSummary• What web fonts are• Why they are awesome• How to use them in your themes• Further discovery
  3. 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. 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. 5. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioThe Old DaysAny font you want, as long as its web-safe font-family: Arial, Verdana, sans-serif;
  6. 6. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio The Next StepEmbedding text in imagesDrawbacks• Images are heavier than text• Changes to text must be made in image editor• Less accessible
  7. 7. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioWeb 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. 8. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio@font-face• The technique that saved us
  9. 9. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioOptions• Commercial services• Free services• Do It Yourself!
  10. 10. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioCommercial Services@font-face Face OffSmashing magazine review (2010)A List Apart resources
  11. 11. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioCommercial Considerations• Price - not just the cost but the model• Available fonts• Delivery method• Ease of setup - is there a WP plugin?
  12. 12. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio@font-face Face Off
  13. 13. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioFree Services Google Web Fonts Font Squirrel
  14. 14. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioGoogle Fonts• Choose the fonts you want by adding them to your "collection"• Google generates the code• Add this to your sites code - HTML or CSS• OR, use the WP Google Fonts plugin
  15. 15. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioFont Squirrel• Download the fonts that you want• @font-face kits!
  16. 16. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioDo It Yourself - Font Squirrel• Generate your own @font-face kit
  17. 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 • Dont forget to update the paths
  18. 18. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioTips • 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. 19. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio Further Discoveryhttp://en.wikipedia.org/wiki/Web_typographyhttp://en.wikipedia.org/wiki/TrueTypehttp://en.wikipedia.org/wiki/OpenTypehttp://en.wikipedia.org/wiki/Web_Open_Font_Formathttp://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. 20. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio AddendumThis information was added after the presentation. Thanks to David Balogh(@r303blue) and Hugo Baeta (@hugobaeta) for their generous help! :) • Check Robert Bringhursts 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 Squirrels 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 Apples 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!
  21. 21. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioKeep in Touch Rindy Portfolio @portfolarindy@tadpole.cc

×