Web Fonts Revisited
Upcoming SlideShare
Loading in...5
×
 

Web Fonts Revisited

on

  • 522 views

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

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

Statistics

Views

Total Views
522
Views on SlideShare
522
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
1

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Fonts Revisited Web Fonts Revisited Presentation Transcript

  • Web Fonts Revisited
  • 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
  • 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.
  • 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.
  • 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.
  • Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13  Hosted Web Fonts 4. copy code in box #4. ←
  • Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13  Hosted Web Fonts 5. add code to your site’s style.css file, done! ←
  • Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13  Self-Hosted Web Fonts 1. choose font, click on Webfonts Kit link. ←
  • Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13  Self-Hosted Web Fonts 2. click on Download Font- Face Kit button. ←
  • 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.
  • 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.
  • 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.)
  • 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)
  • 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!
  • 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)
  • 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.