Greg Veen gave a presentation on web fonts at the 2011 Web 2.0 Expo in San Francisco. He discussed the history of web typography from limited font support in early browsers to today's wide range of font formats and browser compatibility. Veen explained how web fonts can enhance user experience by allowing designers more control over typography. However, rendering quality depends on factors like font files, hinting, operating systems and browsers. Techniques like Flash of Unstyled Text and loading fonts with JavaScript aim to prevent delays as fonts load.

1. Web Fonts: Why
Bother?
Greg Veen, 29 March 2011, Web 2.0 Expo, San
Francisco

2. Hello, I’m Greg
Veen
Web designer, developer
Now: Co-founder,
Before: Twitter, Google,
Monster.com...

3. @gregveen

4. @gregveen
#w2e #webfonts

5. Agenda
A web typography renaissance
How did we get here?
The value of web fonts
Challenges, advances
Q&A

6. Agenda
A web typography renaissance
How did we get here?
The value of web fonts
Challenges, advances
Q&A

20. Agenda
A web typography renaissance
How did we get here?
The value of web fonts
Challenges, advances
Q&A

21. 600 years of typography

22. thousand
s
of
fonts

23. 1993:
no
fonts

24. 2008:
18
fonts

30. today: new browsers

31. today: new browsers

33. Agenda
A web typography renaissance
How did we get here?
The value of web fonts
Challenges, advances
Q&A

34. formats

35. OTF SVG WOFF EOT
formats

36. OTF/TTF SVG WOFF EOT
IE9 IE9 IE5
FF3.5 FF3.5 FF3.6
Chrome 4 Chrome 0.3 Chrome 5
Safari 3.1 Safari 3.1
Opera 10 Opera 9
iOS 4.2 iOS 1
2.2
browsers

37. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}

38. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}

39. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}

40. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}

41. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}
h1 {
font-family: 'Awesome Font',
'Georgia', serif;
}

42. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}
h1 {
font-family: 'Awesome Font',
'Georgia', serif;
}

43. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}
h1 {
font-family: 'Awesome Font',
'Georgia', serif;
}

44. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}
h1 {
font-family: 'Awesome Font',
'Georgia', serif;
}

45. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}
h1 {
font-family: 'Awesome Font',
'Georgia', serif;
}

46. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}
h1 {
font-family: 'Awesome Font',
'Georgia', serif;
}

47. OTF/TTF SVG WOFF EOT
IE9 IE9 IE5
FF3.5 FF3.5 FF3.6
Chrome 4 Chrome 0.3 Chrome 5
Safari 3.1 Safari 3.1
Opera 10 Opera 9
iOS 1
2.2
browsers

48. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.eot'); /* IE 5-8 */
src: local('☺'), /* sneaky trick for IE */
url('awesome-font.woff') format('woff'), /* FF 3.6+, Chrome 5+, IE9 */
url('awesome-font.ttf') format('truetype'), /* Opera, Safari, iOS4.2+ */
url('awesome-font.svg#font') format('svg'); /* iOS <4.1 */
}

49. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.eot'); /* IE 5-8 */
src: local('☺'), /* sneaky trick for IE */
url('awesome-font.woff') format('woff'), /* FF 3.6+, Chrome 5+, IE9 */
url('awesome-font.ttf') format('truetype'), /* Opera, Safari, iOS4.2+ */
url('awesome-font.svg#font') format('svg'); /* iOS <4.1 */
}
@media screen and (max-device-width: 480px) {
@font-face {
font-family: "Awesome Font";
src: url("awesome-font.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}}

50. @font-face {
font-family: 'Awesome Font';
src: url('awesome-font.eot'); /* IE9 Compat Modes */
src: url('awesome-font.eot?iefix') format('eot'), /* IE6-IE8 */
url('awesome-font.woff') format('woff'), /* Modern Browsers */
url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}

51. <script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

53. rendering

56. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

57. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

58. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

59. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

60. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

61. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

62. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

63. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

67. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

69. TrueType and

70. TrueType and

72. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

80. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

81. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

82. Rendering factors
1) type design philosophy
2) font file and outline format
3) hinting
4) operating systems
5) web browsers
6) font smoothing preferences

83. Core Text

84. Core Text
DirectWrite

85. GDI + Core Text
ClearType

86. Core Text
GDI + Standard

87. Core + no
GDI Text

88. WTF?!

91. Flash of
unstyled text

96. <script type="text/javascript" src="http://use.typekit.com/
xxxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</
script>
<style type="text/css">
.wf-loading {
/* styles to use when web fonts are loading */
}
.wf-active {
/* styles to use when web fonts are active */
}
.wf-inactive {
/* styles to use when web fonts are inactive */
}
</style>

97. “Radical Web Typography”

98. <h1 class="fancy_title">1962</h1>

99. <h1 class="fancy_title">
<span class="char1">1</span>
<span class="char2">9</span>
<span class="char3">6</span>
<span class="char4">2</span>
</h1>

100. h1.fancy_title .char3,
h1.fancy_title .char4 {
position: relative;
top: -10px;
}

103. <h1 class="fancy_title">
<span class="char1">1</span>
<span class="char2">9</span>
<span class="char3">7</span>
<span class="char4">2</span>
</h1>

104. <h1 class="fancy_title">
<span class="char1">1</span>
<span class="char2">9</span>
<span class="char3">7</span>
<span class="char4">2</span>
</h1>

105. <h1 class="fancy_title">1972</h1>

107. Thank you!

108. Questions?
Comments?

109. @gregveen