Downloaded 19 times
Web Fonts Revisited
- 1.
- 2. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Overview Hosted Web Fonts • Google (✗ $) • Typekit ($) • Fontdeck ($) • Webtype ($) • fonts.com ($) • WebINK ($) Self-Hosted WebFonts • Google (✗ $) • Font Squirrel (✗) The quick brown fox jumps over a lazy dog. $ Paid fonts ✗ Free fonts! ABC123
- 3. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Hosted Web Fonts 1. go to google. com/fonts, click on the arrow/box button of your ← selected web font.
- 4. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Hosted Web Fonts 2. choose style(s), copy code in box #3. ← ← NOTE: use the same font family through-out your site, don’t confuse users by using too many fonts, in most cases, 2 or 3 fonts is enough.
- 5. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Hosted Web Fonts 3. open your site’s header.php file, paste link code inside <head> section. ← NOTE: link code should be the first element in the <head> section.
- 6. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Hosted Web Fonts 4. copy code in box #4. ←
- 7. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Hosted Web Fonts 5. add code to your site’s style.css file, done! ←
- 8. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Self-Hosted Web Fonts 1. choose font, click on Webfonts Kit link. ←
- 9. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Self-Hosted Web Fonts 2. click on Download Font- Face Kit button. ←
- 10. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Self-Hosted Web Fonts 3. create a new fonts folder in your ← wp-content folder.
- 11. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Self-Hosted Web Fonts 4. upload the font- face kit folder to the newly created fonts folder.
- 12. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Self-Hosted Web Fonts 5. open the stylesheet.css file ← in the downloaded font-face kit folder, copy code and paste at the top of your style.css file. NOTE: each font-face codeblock represents one type face style (e.g., bold, italic, black, etc.)
- 13. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Self-Hosted Web Fonts 6. you’ll need to ← change all the url paths to link to the new font, e.g., src: url(../../fonts/ new-web-font)
- 14. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Self-Hosted Web Fonts 7. open the demo. html file in the down- loaded font-face kit folder to get the ← correct font-family names to add to your site’s styles.css file, done!
- 15. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Resources WP Plugins • AnyFont (wordpress.org/extend/plugins/anyfont) • WP Google Fonts (wordpress.org/extend/plugins/wp-google-fonts) • WordPress Font Uploader (wordpress.org/extend/plugins/font-uploader) • Typekit for WordPress (wordpress.org/extend/plugins/typekit-fonts-for-wordpress) Paid WP Plugins • FontPress (codecanyon.net/item/fontpress-font-manager-plugin/1746759)
- 16. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13 Resources Tutorials • Using Google Web Fonts with WordPress (webdesignfromscratch.com/ wordpress-tutorials/using-google-web-fonts-with-wordpress-the-right-way) • Adding Custom Fonts to WordPress with @Font-Face and CSS (wpmu.org/ adding-custom-fonts-to-wordpress-with-font-face-and-css) • Best 20 webfonts from Google Web Fonts and @font-face embedding (awwwards.com/best-20-webfonts-from-google-web-fonts-and-font-face- embedding.html) • Install Google Web Fonts on your Computer (labnol.org/software/google- fonts-on-computer/19780) • How to: @font-face for Wordpress (video) (youtube.com/watch?v=jlwmw-WJ0i4) Title page artwork courtesy www.awwwards.com.