Given at the Boston WordPress meetup, 2/18/13. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.

1. Webfonts:
WordPress & Beyond
presented at #bostonwp
@melchoyce choycedesign.com

2. Mel Choyce
• UX Apprentice at Fresh Tilled Soil
• WordPress evangelist
• Former Western MA WordPress meetup
co-coordinator
• For hire!
@melchoyce choycedesign.com

3. Intro to Webfonts

4. “Web Design is 95% Typography”
Oliver Reichenstein,
The Web is All About Typography. Period.

5. The Past

6. Web Safe Fonts
Courier
Arial Georgia
Times New Roman
Comic Sans Verdana

7. Font Replacement
• Images
• Scalable Inman Flash Replacement (sIFR)
• cufón
• Face Lift Image Replacement (FLIR)

8. And then came...

9. @font-face

12. The Present
& Beyond

13. Icon Fonts

14. Graph Fonts

15. Good Web Type

16. Picking Typefaces

17. When choosing typefaces...
• Think about tone. Is it appropriate?
• Does it have too much personality?
• Is it easy to read?

18. “Using a typeface because it looks
interesting might yield acceptable
results, but really practicing the art
of typography involves
understanding typefaces and what
they mean.”
Jason Santa Maria,
On Web Typography

19. When in doubt...
Sans Serif
+
Serif

20. Families > loners

21. Steal pairings
http://hellohappy.org/beautiful-web-type/

22. Making it Look Good

23. Size
* http://www.zeldman.com/

24. Line Height
He lived in a little town called, He lived in a little town called,
Puddleby-on-the-Marsh. All the folks, Puddleby-on-the-Marsh. All the folks,
young and old, knew him well by sight.
And whenever he walked down the young and old, knew him well by sight.
street in his high hat everyone would And whenever he walked down the
say, “There goes the Doctor!—He’s a street in his high hat everyone would
clever man.” And the dogs and the
children would all run up and follow say, “There goes the Doctor!—He’s a
behind him; and even the crows that clever man.” And the dogs and the
lived in the church-tower would caw
children would all run up and follow
and nod their heads.
behind him; and even the crows that
lived in the church-tower would caw
and nod their heads.
1.4 - 1.6x your font size for body text

25. Line Length
The house he lived in, on the edge of the town, was quite small; but his garden was very
large and had a wide lawn and stone seats and weeping-willows hanging over. His sister,
Sarah Dolittle, was housekeeper for him; but the Doctor looked after the garden himself.
The house he lived in, on the edge of the town, was quite
small; but his garden was very large and had a wide lawn
and stone seats and weeping-willows hanging over. His
sister, Sarah Dolittle, was housekeeper for him; but the
Doctor looked after the garden himself.
No more than 50 - 75 characters long

26. Webfonts in WP

27. use a plugin

28. add it manually

33. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.eot');
src: url('awesome-font.eot?#iefix') format('embedded-opentype'),
url('awesome-font.woff') format('woff'),
url('awesome-font.ttf') format('truetype'),
url('awesome-font.svg#svgFontName') format('svg');
}

34. Thanks.
Any questions?
@melchoyce choycedesign.com