Using web fonts in word press

  • 462 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
462
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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