Given at the Western MA WordPress meetups, 5/30/12. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.
3. Weâre in a Webfont
Rennaissance.
Take a look...
4.
5.
6.
7. Webfonts in the Past
1. Web-safe fonts
⢠Arial, Verdana, Georgia, etc.
2. Font Replacement
⢠SIFR
⢠Cufon
⢠FLIR
8. Webfonts in the Present
@font-face
⢠CSS rule made popular in CSS3
⢠Embed fonts directly onto your site
⢠Donât need to worry about browser-safe
fonts anymore!
10. Webfonts in the Present
@font-face formats
1. EOT (IE)
2. WOFF (Modern Browsers)
3. TTF (Safari, Android, iOS)
4. SVG (Legacy iOS)
Note: Thereâs some overlap -- some browsers support
multiple format options. However, itâs safest to use
them all.
16. Finding the Right Webfont
Picking the Right Service
Figure out your constraints.
⢠Self-hosted or cloud-hosted?
⢠Do you need control over your ďŹles?
⢠Canât add new ďŹles to your server?
⢠Self-hosted: Font Squirrel, Font Spring, etc.
⢠Cloud-hosted: Google Web Fonts, Typekit, etc.
17. Finding the Right Webfont
Picking the Right Service
Figure out your constraints.
⢠Free service or pay service?
⢠Do you have a budget for fonts?
⢠Hundreds of free fonts, but pay fonts are generally
better quality
⢠Free services: Google Web Fonts, Font Squirrel, etc.
⢠Pay services: Typekit, Font Spring, etc.
18. Finding the Right Webfont
Picking the Right Font
Figure out your needs.
⢠Header font?
⢠Needs to look good big
⢠More stylistic freedom -- can use almost any style of font
⢠Body font?
⢠Needs to look good at medium to smaller sizes
⢠Less stylistic freedom -- limited to serif and sans-serif
⢠Must be very readable and legible
19. Finding the Right Webfont
Picking the Right Font
Figure out your tone.
⢠What is your site about?
⢠Who is your audience?
⢠What are you trying to say?
⢠Your fonts should match your siteâs tone
⢠Corporate site shouldnât use Comic Sans. Travel blog
shouldnât be stiďŹ and formal.
20. Finding the Right Webfont
Do What Feels Right
Picking fonts is highly intuitive.
⢠What works for some might not work for others
⢠Some might like structure, while others freedom
⢠Finding the right can be as organic or structured
as you want it to be.
25. Webfonts and WordPress 3
Adding From WP Plugins
There are many webfont plugins available for WP:
1. Google Web Fonts: typecase, WP Google Fonts
2. Typekit: Typekit plugin for WordPress, Typekit Fonts
for WordPress
3. Fonts.com: Web Fonts, Webfonts
4. Fontsforweb.com: Font - web fonts plugin
6. Multiple: Fontmeister
7. Add to WYSIWYG: Ultimate TinyMCE - Ultimate Google
Webfonts Addon
27. Webfont Resources 4
3
Where to Find Fonts
⢠Fontdeck ⢠The League of Moveable Type
⢠Fonts.com Web Fonts ⢠MyFonts Webfonts
⢠FontsLive ⢠Process Type Foundry
⢠Font Squirrel ⢠Typekit
⢠Fontspring ⢠Typotheque
⢠Google Web Fonts ⢠Web FontFonts
⢠Just Another Foundry ⢠WebINK
⢠Kernest ⢠WebType