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.
