webfonts: the hype about type
DESCRIPTION
So far designers were limited to the fonts available on the user's machines. All of a sudden New possibilities seem to open up.TRANSCRIPT
![Page 1: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/1.jpg)
1
Memi Beltrame: Webfonts – The Hype about Type
Webfonts
The Hype about Type
April 6th 2010
![Page 2: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/2.jpg)
2
Memi Beltrame: Webfonts – The Hype about Type
How can designers make use of the rich variety of fonts on websites?
![Page 3: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/3.jpg)
3
Memi Beltrame: Webfonts – The Hype about Type
So far designers were limited to the fonts available on the user's
machines.
![Page 4: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/4.jpg)
4
Memi Beltrame: Webfonts – The Hype about Type
This means only fonts distributed with the OS.
font-family: Georgia, "Times New Roman", serif;
![Page 5: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/5.jpg)
5
Memi Beltrame: Webfonts – The Hype about Type
Helvetica on Macintosh
Arial on Windows
vs.
![Page 6: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/6.jpg)
6
Memi Beltrame: Webfonts – The Hype about Type
Alternative: Download the font from the server!
![Page 7: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/7.jpg)
7
Memi Beltrame: Webfonts – The Hype about Type
Alternative: Download the font from the server!
CSS 2@font-face {
src: local("Alabama Italic"),url(http://fonts.org/alabama-italic)
format("truetype"); }
![Page 8: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/8.jpg)
8
Memi Beltrame: Webfonts – The Hype about Type
Alternative: Download the font from server!
CSS 2 Dropped in CSS 2.1@font-face {
src: local("Alabama Italic"),url(http://fonts.org/alabama-italic)
format("truetype"); }
![Page 9: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/9.jpg)
9
Memi Beltrame: Webfonts – The Hype about Type
2 Problems
• DRM• Browsers
![Page 10: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/10.jpg)
10
Memi Beltrame: Webfonts – The Hype about Type
DRM
![Page 11: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/11.jpg)
11
Memi Beltrame: Webfonts – The Hype about Type
DRMDesigners rely on good fonts
![Page 12: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/12.jpg)
12
Memi Beltrame: Webfonts – The Hype about Type
DRMDesigners rely on good fonts
These have variations & dîàçrìtïcs
![Page 13: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/13.jpg)
13
Memi Beltrame: Webfonts – The Hype about Type
DRMDesigners rely on good fonts
These have variations & dîàçrìtïcsGood fonts come from type foundries
![Page 14: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/14.jpg)
14
Memi Beltrame: Webfonts – The Hype about Type
DRMDesigners rely on good fonts
These have variations & dîàçrìtïcsGood fonts come from type foundries
These want money for their use
![Page 15: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/15.jpg)
15
Memi Beltrame: Webfonts – The Hype about Type
DRMDesigners rely on good fonts
These have variations & dîàçrìtïcsGood fonts come from type foundries
These want money for their use
DRM
![Page 16: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/16.jpg)
16
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
1. Web Font Services
![Page 17: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/17.jpg)
17
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
1. Web Font Services
Foundries:Linotype
Monotype
![Page 18: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/18.jpg)
18
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
1. Web Font Services
Font-Service:Typekit
TypothequeFontdeck
Foundries:Linotype
Monotype
Licence to
![Page 19: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/19.jpg)
19
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
1. Web Font Services
Font-Service:Typekit
TypothequeFontdeck
Foundries:Linotype
Monotype
Licence to
Domain 1Domain 1 Domain 2
Licence to you
![Page 20: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/20.jpg)
20
Memi Beltrame: Webfonts – The Hype about Type
Typekit
- Sign up
![Page 21: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/21.jpg)
21
Memi Beltrame: Webfonts – The Hype about Type
Typekit
- Sign up- Choose type of account
![Page 22: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/22.jpg)
22
Memi Beltrame: Webfonts – The Hype about Type
Typekit
- Sign up- Choose type of account- Choose font(s)
![Page 23: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/23.jpg)
23
Memi Beltrame: Webfonts – The Hype about Type
Typekit
<script type="text/javascript"
src="http://use.typekit.com/cyq6gmy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}
</script>
Unique identifer
- Sign up- Choose type of account- Choose font(s)- Embed markup
![Page 24: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/24.jpg)
24
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
2. Open Fonts
![Page 25: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/25.jpg)
25
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
2. Open Fontshttp://openfontlibrary.org/
![Page 26: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/26.jpg)
26
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
2. Open FontsOpen Font Library: - Ensures open licencing
(public domain, SIL Open Font Licence)
![Page 27: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/27.jpg)
27
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
2. Open FontsOpen Font Library: - Ensures open licencing
(public domain, SIL Open Font Licence) - Ensures a certain standard in fonts
![Page 28: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/28.jpg)
28
Memi Beltrame: Webfonts – The Hype about Type
DRM Solutions
2. Open FontsOpen Font Library: - Ensures open licencing
(public domain, SIL Open Font Licence) - Ensures a certain standard in fonts
Is no guarantee for professional fonts
![Page 29: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/29.jpg)
29
Memi Beltrame: Webfonts – The Hype about Type
Browsers
![Page 30: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/30.jpg)
30
Memi Beltrame: Webfonts – The Hype about Type
BrowsersInternet Explorer only understands EOT
![Page 31: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/31.jpg)
31
Memi Beltrame: Webfonts – The Hype about Type
BrowsersInternet Explorer only understands EOT
No TTF, OTF, SVG, WOFF (new!)
![Page 32: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/32.jpg)
32
Memi Beltrame: Webfonts – The Hype about Type
BrowsersInternet Explorer only understands EOT
No TTF, OTF, SVG, WOFF (new!)
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.otf') format('opentype');}
YES IT'S A HACK!
![Page 33: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/33.jpg)
33
Memi Beltrame: Webfonts – The Hype about Type
Browsers
Formats for Non-IE Browsers
![Page 34: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/34.jpg)
34
Memi Beltrame: Webfonts – The Hype about Type
BrowsersThe Format Names:
SVG – Scalable Vector GraphicsTTF - True Type FontsOTF – Open Type FormatWOFF - Web Open Font Format
![Page 35: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/35.jpg)
35
Memi Beltrame: Webfonts – The Hype about Type
Browsers
For an in-depth analysis cf http://liip.to/fontEngineComparison
![Page 36: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/36.jpg)
36
Memi Beltrame: Webfonts – The Hype about Type
Browsers
Problems with ttf: - Mozilla support is new
- Chrome disables it by default
![Page 37: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/37.jpg)
37
Memi Beltrame: Webfonts – The Hype about Type
Browsers
Problems with otf: - Mozilla support is new
- No Chrome support- doesn't render nicely on Windows
![Page 38: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/38.jpg)
38
Memi Beltrame: Webfonts – The Hype about Type
Browsers
Problems with svg: - Mozilla does not support it, at least not very well
![Page 39: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/39.jpg)
39
Memi Beltrame: Webfonts – The Hype about Type
BrowsersSVG : W3C recommendation
Implementation:
Source:
http://de.wikipedia.org/wiki/Svg
![Page 40: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/40.jpg)
40
Memi Beltrame: Webfonts – The Hype about Type
WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF
![Page 41: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/41.jpg)
41
Memi Beltrame: Webfonts – The Hype about Type
WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly
![Page 42: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/42.jpg)
42
Memi Beltrame: Webfonts – The Hype about Type
WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF
![Page 43: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/43.jpg)
43
Memi Beltrame: Webfonts – The Hype about Type
WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9
![Page 44: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/44.jpg)
44
Memi Beltrame: Webfonts – The Hype about Type
WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9 - is backed by type foundries
![Page 45: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/45.jpg)
45
Memi Beltrame: Webfonts – The Hype about Type
WOFFIncludes optional metadata
![Page 46: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/46.jpg)
46
Memi Beltrame: Webfonts – The Hype about Type
WOFFIncludes optional metadata
Vendors can tag their fonts with information related to font usage.
![Page 47: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/47.jpg)
47
Memi Beltrame: Webfonts – The Hype about Type
WOFFIncludes optional metadata
Vendors can tag their fonts with information related to font usage.
Font usage can be monitored but not completely restricted
![Page 48: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/48.jpg)
48
Memi Beltrame: Webfonts – The Hype about Type
WOFFFirefox: - default same-origin restriction
![Page 49: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/49.jpg)
49
Memi Beltrame: Webfonts – The Hype about Type
WOFFFirefox: - default same-origin restriction - only loads WOFF from the same domain
![Page 50: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/50.jpg)
50
Memi Beltrame: Webfonts – The Hype about Type
WOFFFirefox: - default same-origin restriction - only loads WOFF from the same domain - makes font-vendors happy!
![Page 51: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/51.jpg)
51
Memi Beltrame: Webfonts – The Hype about Type
So why this sudden font hype?
![Page 52: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/52.jpg)
52
Memi Beltrame: Webfonts – The Hype about Type
So why this sudden font hype?
Implementation of the @font-face directive gained signifcant speed.
![Page 53: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/53.jpg)
53
Memi Beltrame: Webfonts – The Hype about Type
So why this sudden font hype?
Font-services make designers and type foundries happy
![Page 54: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/54.jpg)
54
Memi Beltrame: Webfonts – The Hype about Type
So why this sudden font hype?
WOFF may become the new standard for fonts on the web.
With Microsoft on board.
![Page 55: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/55.jpg)
55
Memi Beltrame: Webfonts – The Hype about Type
Read more:
http://delicious.com/plonk/webfonts
![Page 56: Webfonts: The Hype about Type](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54c7c4664a795904038b4572/html5/thumbnails/56.jpg)
56
Memi Beltrame: Webfonts – The Hype about Type
Thank you!memibeltrame.ch
twitter.com/bratwurstkomet
More presentations:slideshare.net/memibeltrame
liip.ch