How to find webfonts and use them on your website.

1. WEBFONTS
1

2. AGENDA
1. Who cares?
2. Where do fonts come from?
3. Why do we have to pay for fonts?
4. Webfonts : Embedding
5. Webfonts : Hosting
6. How to use Type like a Pro
2

3. 1) WHO CARES?
3

4. You have 6 SECONDS to make a good impression.
Be professional.
Shine your shoes.
Press your pants.
Use nice type.
4

5. Font is like an individual song
Typeface is like a CD, a collection of songs
EXAMPLE:
Helvetica Nueu Thin is a font
Helvetica Nueu is a typeface
5

6. 2) WHERE DO FONTS
COME FROM?
6

7. A BRIEF HISTORY
Moveable type was born during the Renaissance
Printers hired Punchcutters to craft metal type
Punchcutters would turned hand-written alphabets
into metal type.
Outline of a letter is transferred to one end of a steel bar.
The negative space is cut away and a Punch is created
Punch & Matrix
A Matrix is created by imprinting the Punch on a soft metal
Lead is poured into the matrix to produce a single piece of type
The typeface, Garamond, is named after the Punchcutter
Claude Garamond (c. 1480–1561).
7

8. A BRIEF HISTORY
Metal type was
distributed in boxes
with compartments
Boxes were called
cases
Upper Case and
Lower case letters
Type was set by hand
8

9. A BRIEF HISTORY
1884 Ottmar Mergenthaler
inventing a typesetting
machine called the
Linotype.
The machine had a
keyboard that the typesetter
used to set lines of type.
9

10. A BRIEF HISTORY
1950—1980
Phototype setting:
Strobe light through
spinning disk which had
a film negative.
10

11. 3) WHY DO I HAVE
TO PAY FOR FONTS?
11

12. TYPE DESIGN IS AN ART
Skilled artisans design Typefaces

Type foundries pay Type

Designers to turn metal type
designs into Digital versions.
Examples of digital versions of

Garamond
12

13. 1976 COPYRIGHT LAW
From Wikipedia:
The Copyright Law of the United States encourages the
creation of art and culture by rewarding authors and artists with
a set of exclusive rights.
Federal Copyright law grants authors and artists:
The exclusive right to make and sell copies of their works

The right to create derivative works

The right to perform or display their works publicly.

These exclusive rights are subject to a time limit, and generally

expire 70 years after the author's death.
13

14. 4) WEBFONTS : EMBEDDING
14

15. WHERE DO YOU FIND WEBFONTS?
15

16. FREE : YOUR COMPUTER [WEB-SAFE]
Windows fonts / Mac Fonts / Font family
16

17. FREE : YOUR COMPUTER [WEB-SAFE]
Windows fonts / Mac Fonts / Font family
17

18. COMPUTER FONTS : HOW TO USE
p { font-family: Verdana, Geneva, sans-serif ; }
p { font-family: ‘Lucida Console’, Monaco, monospace ; }
Mac snob
p { font-family: ‘Hel Neue, Helvetica, sans-serif ; }
18

19. FREE : FONT SQUIRREL
fontsquirrel.com
Good Font resource
Once you locate a
font, you have to
upload them to your
web server
Use CSS to declare
19

20. FREE : FONT SQUIRREL
20

21. FREE : FONT SQUIRREL
Download Folder: OTF files
21

22. WHERE TO PURCHASE FONTS
22

23. PURCHASE : TYPE FOUNDRIES AND DESIGNERS
Adobe.com
Monotype
MyFonts.com
Typography.com*
OkayType*
23

24. PURCHASE : TYPE FOUNDRIES AND DESIGNERS
MyFonts.com
Reseller
of most all
foundries
Reseller
of small font
design firms All kinds
of way to search
What the Font
Keep a library of your
favorite fonts
Remembers every
font you bought
24

25. THE TROUBLE WITH BROWSERS
25

26. You’ll need font files for cross-browser support.
26

27. FONTS & BROWSER SUPPORT
TTF True Type EOT SVG
Embedded Scaleable
OTF Open Type Open Type Vector
Graphics
Safari, Internet Others
Firefox Explorer
Chrome
27

28. FONTS & BROWSER SUPPORT
WOFF (Web Open Font Format)
Developed in 2009

Supported by the W3C, aims to make it the standard

Essentially Open Type or True Type with compression

and additional meta information
All browsers will support this in the future

28

29. FONTS & BROWSER SUPPORT
http://caniuse.com/ttf
29

30. { Remember these? OTF files acquired from Font Squirrel }
+3 font files*
+3 font files
+3 font files
+3 font files
+3 font files
+3 font files
+3 font files
21 font files
+ 7 font files
*EOT + SVG + WOFF
28 font files to upload
30

31. NOW WHAT
31

32. FONT SQUIRREL TO THE RESCUE
32

33. @FONT-FACE GENERATOR
@font-face Generator creates all 4 font formats for browser compatibility.
33

34. @FONT-FACE KIT GENERATOR
Cowboy Western.otf purchased from MyFonts
Check OPTIMAL and click DOWNLOAD
34

35. @FONT-FACE KIT GENERATOR
35

36. @FONT-FACE KIT GENERATOR
A folder with all of your
converted font files,
plus a demo page
will be downloaded to
your computer once
Font Squirrel is done
generating your fonts.
36

37. @FONT-FACE KIT GENERATOR
37

38. @FONT-FACE KIT GENERATOR : DEMO.HTML
Specimen Tab
38

39. @FONT-FACE GENERATOR : DEMO.HTML
Sample Layout
39

40. @FONT-FACE GENERATOR : DEMO.HTML
Glyphs & Languages
Curly Quote Entity
Code: "
40

41. @FONT-FACE GENERATOR : DEMO.HTML
Installing Webfonts
@font-face code
41

42. @FONT-FACE : STYLESHEET
@font-face {
font-family: CowboyWestern;
src: url('cowboy_western-webfont.eot');
src: url('cowboy_western-webfont.eot?#iefix') format('embedded-opentype'),
url('cowboy_western-webfont.woff') format('woff'),
url('cowboy_western-webfont.ttf') format('truetype'),
url('cowboy_western-webfont.svg#CowboyWestern) format('svg');
font-weight: normal;
font-style: normal;
}
p { font-family: CowboyWestern; }
42

43. ICON FONTS
43

44. FREE FONT : FONT-AWESOME / ICON FONT
One font, 249 icons
Pictographs of web-related actions.
CSS control
Easy to style icon color, size, shadow.
Anything that's possible with CSS.
Perfect on Retina Displays
Icons are vectors, which mean they're gorgeous
on high-resolution displays.
Infinite scalability
Scalable vector graphics means every icon
looks awesome at any size.
44

45. FREE FONT : FONT-AWESOME / ICON FONT
Where to download:
http://fortawesome.
github.com/
Font-Awesome/
---------------
bigwdesign.com/
webfonts/font-
awesome/github/
docs/test.html
45

46. 6) WEBFONTS : HOSTING
46

47. FREE FONTS : GOOGLE FONTS
google.com/webfonts
 Hosted solution
 You don’t have to
install fonts
47

48. USING : GOOGLE FONTS
48

49. USING : GOOGLE FONTS
49

50. USING : GOOGLE FONTS
50

51. USING : GOOGLE FONTS
51

52. USING : GOOGLE FONTS
52

53. USING : GOOGLE FONTS
Paste into Header of your HTML
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700,800'
rel='stylesheet' type='text/css'>
How to use the font in your CSS
h1 { font-family: ‘Raleway,’ sans-serif; font-weight: 400; }
53

54. WEBFONTS : HOSTING FONTS
Fontdeck.com
Typekit.com
Webtype.com
Fonts.com
54

55. WEBFONTS : HOSTING FONTS
http://sprungmarker.de/wp‐content/uploads/webfont‐services/
55

56. WEBFONTS : HOSTING FONTS
56

57. HOSTING FONTS : FONTDECK
(VARIOUS SMALL FOUNDRIES)
57

58. HOSTING FONTS : FONTDECK / PRICING
THEIR PLAN:
$7.5 per font
per year.
Unlimited
fonts and
websites.
58

59. HOSTING FONTS : TYPEKIT
(ADOBE)
59

60. HOSTING FONTS : TYPEKIT / PRICING
60

61. HOSTING FONTS : FONTS.COM
(MONOTYPE, LINOTYPE, ITC)
61

62. HOSTING FONTS : FONTS.COM / PRICING
MY PLAN:
$10 per month.
Unlimited
fonts and
websites.
62

63. FONTS.COM : USING
63

64. FONTS.COM : USING
64

65. FONTS.COM : USING
Add & Edit Fonts
Click Publish Options
Add & Edit Domains
65

66. FONTS.COM : USING
HTML header code:
Link to javascript
Fonts.com
CSS code
66

67. FONTS.COM : USING
HTML header code:
Links to stylesheet at
Fonts.com
67

68. FONTS.COM : USING
Upgrade plan to buy
fonts and self-host
68

69. 6) HOW TO USE TYPE LIKE A PRO
69

70. TYPE LIKE A PRO: USE NICE TYPE
“Hardly anyone can discern good
typography from bad typography,
but everyone can feel it.”
—Oliver Richtenstien
ia.com
70

71. USING TYPE LIKE A PRO
1. Use curly quotes
2. Use ample leading (line-height)
3. Never, never, never justify type
4. Don’t make your columns too skinny or too wide
5. Don’t use more than 3 typefaces per page
6. Choose an appropriate typeface
7. Avoid Comic Sans
8. Don’t use EM or BOLD, use fonts that are cut Italic or Bold
71

72. TYPE LIKE A PRO : CHARACTER ENTITIES
Not so Good Good
Left Quote : &#8220;
Right Quote : &#8221;
Apostrophe : &#8217;
72

73. TYPE LIKE A PRO: LINE-HEIGHT / BREATHE
OK Better
73

74. TYPE LIKE A PRO: DON'T JUSTIFY
Blah Better
74

75. TYPE LIKE A PRO: USE NICE TYPE
Nice Typefaces Amateurish and overused
ALRIGHT SANS MEDIUM
PLUTO HEAVY
CLARENDON
75

76. RESOURCES : TWITTER
76

77. FONT VS TYPEFACE
77

78. THANK YOU FOR LISTENING
:)
78