Your SlideShare is downloading. ×
Using web fonts in word press
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using web fonts in word press

517
views

Published on

Published in: 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
517
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Using Web Fonts in WordPress Rindy Portfolio WordCamp New York City June 9, 2012
  • 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. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioWho 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 PortfolioThe Old Days Any font you want, as long as its web-safe font-family: Arial, Verdana, sans-serif;
  • 6. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioThe Next StepEmbedding text in imagesDrawbacks● 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 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. 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 PortfolioOptions● Commercial services● Free services● Do It Yourself!
  • 10. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioCommercial Services @font-face Face Off Smashing magazine review (2010) A List Apart resources
  • 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. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio@font-face Face Off
  • 13. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioFree Services Google Web Fonts Font Squirrel
  • 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. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioFont Squirrel● Download the fonts that you want● @font-face kits!
  • 16. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioDo 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 ● Dont forget to update the paths
  • 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. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioFurther 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. Using Web Fonts in WP | WCNYC 2012 | Rindy PortfolioYour feedback is appreciated http://www.surveymonkey.com/s/7BSS2MW Only 2 questions!Download these slides http://crosscutsoftware.com/2012/06/wcnyc-presentation-on-web-fontsKeep in Touch Rindy Portfolio @portfola rindy@tadpole.cc