Webfonts: Demystified
10 likes10,315 views
The document discusses the evolution and current state of webfonts, highlighting the use of @font-face in CSS3 for embedding fonts directly into websites. It also explores future trends like icon and graph fonts, and provides guidance on choosing the right webfont services, considering factors such as hosting type and budget. Additionally, it includes resources and plugins for integrating webfonts in WordPress.
Webfonts: Demystified
- 3. We’re in a Webfont Rennaissance. Take a look...
- 7. Webfonts in the Past 1. Web-safe fonts • Arial, Verdana, Georgia, etc. 2. Font Replacement • SIFR • Cufon • FLIR
- 8. Webfonts in the Present @font-face • CSS rule made popular in CSS3 • Embed fonts directly onto your site • Don’t need to worry about browser-safe fonts anymore!
- 9. Webfonts in the Present @font-face syntax @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); src: url('awesome-font.eot?#iefix') format('embedded-opentype'), url('awesome-font.woff') format('woff'), url('awesome-font.ttf') format('truetype'), url('awesome-font.svg#svgFontName') format('svg'); }
- 10. Webfonts in the Present @font-face formats 1. EOT (IE) 2. WOFF (Modern Browsers) 3. TTF (Safari, Android, iOS) 4. SVG (Legacy iOS) Note: There’s some overlap -- some browsers support multiple format options. However, it’s safest to use them all.
- 11. Webfonts in the Future Where are we going...?
- 12. Webfonts in the Future Moving away from type: • Icon fonts (awesome because: scalable, easily change color, easily add effects)
- 13. Webfonts in the Future Moving away from type: • Graph fonts (awesome because: magic. ...and previous points)
- 15. Finding the Right Webfont
- 16. Finding the Right Webfont Picking the Right Service Figure out your constraints. • Self-hosted or cloud-hosted? • Do you need control over your files? • Can’t add new files to your server? • Self-hosted: Font Squirrel, Font Spring, etc. • Cloud-hosted: Google Web Fonts, Typekit, etc.
- 17. Finding the Right Webfont Picking the Right Service Figure out your constraints. • Free service or pay service? • Do you have a budget for fonts? • Hundreds of free fonts, but pay fonts are generally better quality • Free services: Google Web Fonts, Font Squirrel, etc. • Pay services: Typekit, Font Spring, etc.
- 18. Finding the Right Webfont Picking the Right Font Figure out your needs. • Header font? • Needs to look good big • More stylistic freedom -- can use almost any style of font • Body font? • Needs to look good at medium to smaller sizes • Less stylistic freedom -- limited to serif and sans-serif • Must be very readable and legible
- 19. Finding the Right Webfont Picking the Right Font Figure out your tone. • What is your site about? • Who is your audience? • What are you trying to say? • Your fonts should match your site’s tone • Corporate site shouldn’t use Comic Sans. Travel blog shouldn’t be stiff and formal.
- 20. Finding the Right Webfont Do What Feels Right Picking fonts is highly intuitive. • What works for some might not work for others • Some might like structure, while others freedom • Finding the right can be as organic or structured as you want it to be.
- 22. Webfonts and WordPress 3 Adding From Google Web Fonts Time for a live demo...
- 23. Webfonts and WordPress 3 Adding From Font Squirrel Time for a live demo...
- 24. Webfonts and WordPress 3 Adding From Typekit Time for a live demo...
- 25. Webfonts and WordPress 3 Adding From WP Plugins There are many webfont plugins available for WP: 1. Google Web Fonts: typecase, WP Google Fonts 2. Typekit: Typekit plugin for WordPress, Typekit Fonts for WordPress 3. Fonts.com: Web Fonts, Webfonts 4. Fontsforweb.com: Font - web fonts plugin 6. Multiple: Fontmeister 7. Add to WYSIWYG: Ultimate TinyMCE - Ultimate Google Webfonts Addon
- 27. Webfont Resources 4 3 Where to Find Fonts • Fontdeck • The League of Moveable Type • Fonts.com Web Fonts • MyFonts Webfonts • FontsLive • Process Type Foundry • Font Squirrel • Typekit • Fontspring • Typotheque • Google Web Fonts • Web FontFonts • Just Another Foundry • WebINK • Kernest • WebType
- 28. Webfont Resources 4 3 Some Good Articles • http://webfonts.myfonts.com/webfonts-know-how/what-are-webfonts-0 • http://webtypography.net/ • http://www.adobe.com/devnet/html5/articles/web-typography-and-css- font-face.html • http://www.alistapart.com/articles/fonts-at-the-crossing/ • http://www.alistapart.com/articles/fluidgrids/ • http://webdesign.tutsplus.com/articles/choosing-the-right-font-a- practical-guide-to-typography-on-the-web/ • http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax • http://boldperspective.com/2011/how-to-use-css-font-face/
- 29. Webfont Resources 4 3 Extra Goodies • http://letteringjs.com/ • http://kernjs.com/ • http://fittextjs.com/ • http://chengyinliu.com/whatfont.html • http://www.typetester.org/ • http://fortawesome.github.com/Font-Awesome/ • https://www.fontfont.com/how-to-use-ff-chartwell • http://www.jfontsize.com/
- 30. 5 Questions?