web fonts revisited
Post on 27-Jan-2015
118 Views
Preview:
DESCRIPTION
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 (✗)
ABC123The quick brown fox jumps over a
lazy dog.
$ Paid fonts ✗ Free fonts!
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.
←
←
Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13
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.
Hosted Web Fonts
3. open your site’s header.php file, paste link code inside <head> section.
←
Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13
note: link code should be the first element in the <head> section.
Hosted Web Fonts
4. copy code in box #4.
←
Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13
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
1. choose font, click on Webfonts Kit link.
selF-Hosted Web Fonts
←
Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13
2. click on Download Font-Face Kit button.
selF-Hosted Web Fonts
←
Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13
3. create a new fonts folder in your wp-content folder.
selF-Hosted Web Fonts
←
Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13
4. upload the font-face kit folder to the newly created fonts folder.
selF-Hosted Web Fonts
Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13
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.
selF-Hosted Web Fonts
←
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
6. you’ll need to change all the url paths to link to the new font, e.g., src: url(../../fonts/new-web-font)
selF-Hosted Web Fonts
←
Web Fonts Revisited Philly ‘burbs WordPress Meetup 04.08.13
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!
selF-Hosted Web Fonts
←
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.
top related