Using Web Fonts in WordPress
1 like3,772 views
- The document discusses using web fonts in WordPress, including what web fonts are, why they are useful, and how to implement them in WordPress themes. It covers options for using commercial services, free services like Google Fonts and Font Squirrel, or generating font kits yourself from Font Squirrel. Tips are provided on testing, licensing, and formatting web fonts.
Ad
More Related Content
Viewers also liked (20)
Similar to Using Web Fonts in WordPress (20)
Ad
More from Tadpole Collective (8)
Ad
Recently uploaded (20)
![Halstead’s_Software_Science_&_Putnam’s_Model[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/halsteadssoftwarescienceputnamsmodel1-250502175814-4c85707e-thumbnail.jpg?width=560&fit=bounds)
Using Web Fonts in WordPress
- 1. Using Web Fonts in WordPress Rindy Portfolio WordCamp New York City June 9, 2012
- 2. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio Summary • 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 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. 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 Portfolio The Old Days Any font you want, as long as it's web-safe font-family: Arial, Verdana, sans-serif;
- 6. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio The Next Step Embedding text in images Drawbacks • 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 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
- 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 Portfolio Options • Commercial services • Free services • Do It Yourself!
- 10. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio Commercial Services @font-face Face Off Smashing magazine review (2010) A List Apart resources
- 11. 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?
- 12. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio @font-face Face Off
- 13. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio Free Services Google Web Fonts Font Squirrel
- 14. 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
- 15. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio Font Squirrel • Download the fonts that you want • @font-face kits!
- 16. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio Do 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 • Don't forget to update the paths
- 18. 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!
- 19. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio Further Discovery 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
- 20. 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!
- 21. Using Web Fonts in WP | WCNYC 2012 | Rindy Portfolio Keep in Touch Rindy Portfolio @portfola [email protected]