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.

←


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.

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.

Hosted Web Fonts

4. copy code in box #4.

←



Hosted Web Fonts

5. add code to your site’s style.css file, done!

←


1. choose font, click on Webfonts Kit link.

selF-Hosted Web Fonts

←


2. click on Download Font-Face Kit button.


←


3. create a new fonts folder in your wp-content folder.


←


4. upload the font-face kit folder to the newly created fonts folder.



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.)


6. you’ll need to change all the url paths to link to the new font, e.g., src: url(../../fonts/new-web-font)


←


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!


←


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)


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.

Web Fonts Revisited

Self Improvement

Transcript of Web Fonts Revisited