Web Fonts Revisited

714 views

Published on

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

1 Comment
0 Likes
Statistics
Notes
  • Hi Mike - thanks for sharing this via the Philly 'burbs WordPress Meetup!

    Question - any ideas why my self hosted web font works on Chrome but not Firefox? And on Chrome, the font loads veeery slowly.

    I am using the Merit family (http://www.dafont.com/merit.font) on this site:

    http://www.samanthasand.com/

    If you have any leads I'd appreciate them. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
714
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Web Fonts Revisited

  1. 1. Web Fonts Revisited
  2. 2. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13  OverviewHosted 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. 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. 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. 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. 6. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13  Hosted Web Fonts 4. copy code in box #4. ←
  7. 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. 8. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13  Self-Hosted Web Fonts 1. choose font, click on Webfonts Kit link. ←
  9. 9. Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13  Self-Hosted Web Fonts 2. click on Download Font- Face Kit button. ←
  10. 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. 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. 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. 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. 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. 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. 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.

×