Week 3

 – now is the time

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

@font-face { font-family: "Calibri"; src: url(" format ("truetype"); } h1 { font-family: "Calibri", sans-serif; }

 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

 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

 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+

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

@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; }

 Fonts-SXSW/   _font-face_rule.asp  font-face-implementation-syntax/