Web Fonts Revisited

Download Web Fonts Revisited

Post on 27-Jan-2015

104 views

Category:

Self Improvement

1 download

Embed Size (px)

DESCRIPTION

How to install Google fonts and webfont kits generated with fontsquirrel.com.

TRANSCRIPT

<ul><li> 1. Web Fonts Revisited</li></ul> <p> 2. Web Fonts RevisitedPhilly burbs WordPress Meetup 04.08.13 OverviewHosted Web Fonts Google ( $) Typekit ($) Fontdeck ($) Webtype ($) fonts.com ($) WebINK ($)Self-Hosted WebFonts Google ( $) Font Squirrel ()The quick brownfox 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, dont 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 sites header.php file, paste link code inside section. NOTE: link code should be the first element in the 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 sites 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 filein 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. youll need tochange 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 thecorrect font-family names to add to your sites styles.css file, done! 15. Web Fonts Revisited Philly burbs WordPress Meetup 04.08.13 ResourcesWP 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 ResourcesTutorials 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. </p>