1. Week 3

2.  Typography @font-face – now is the time

3.  @font-face CSS property allows you to embed fonts in web pages  Fonts are hosted on a web server and downloaded to the visitors computer  Must have proper license to do this  Some licenses are free  Not all fonts have a web font license Always check

4. @font-face { font-family: "Calibri"; src: url("http://www.example.com/fonts/calibri.ttf") format ("truetype"); } h1 { font-family: "Calibri", sans-serif; }

5.  Embedded Open Type (Microsoft) IE 4+  Scalable Vector Graphics Fonts embedded in SVG documents, a type of XML file  TrueType / OpenType TrueT ype invented by Apple in late 80s; OpenType is Microsoft/Adobe’s extension of TrueType  Web Open Font Format Think of it as a compressed container file for TrueType/OpenType fonts and metadata Will likely be the W3C standard for web fonts

6.  Internet Explorer (all versions): EOT  Safari (3.2+): TTF / OTF  iPhone (3.1) SVG  Chrome (all versions): SVG (TTF/OTF added 25th Jan 2010)  Firefox (3.5+): TTF/OTF (WOFF added 3.6)  Opera (10+) TTF/OTF

7.  EOT: All versions of IE  SVG: iPhone, Opera 9+, Chrome  TTF / OTF: Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4+, IE 9+ (font embedding permissions set to installable)  WOFF: Firefox 3.6+, Chrome 5+, Opera Presto, IE 9+, Mac OS X Safari 5.1+

8. @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } Or @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); }

9. @font-face { font-family: 'AlegreyaRegular'; src: url('Alegreya-Regular-webfont.eot'); src: url('Alegreya-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Alegreya-Regular-webfont.woff') format('woff'), url('Alegreya-Regular-webfont.ttf') format('truetype'), url('Alegreya-Regular-webfont.svg#AlegreyaRegular') format('svg'); font-weight: normal; font-style: normal; }

10.  http://www.w3.org/Talks/2010/0313- Fonts-SXSW/  http://www.miltonbayer.com/font-face/  http://www.w3schools.com/cssref/css3_pr _font-face_rule.asp  http://paulirish.com/2009/bulletproof- font-face-implementation-syntax/