Web Font Basics The following fonts are installed on both Windows XP and Mac OS X Panther by Default • Arial • Times New Roman • Arial Italic • Times New Roman Italic • Arial Bold • Times New Roman Bold • Arial Bold Italic • Times New Roman Bold Italic • Arial Black • Trebuchet MS • Comic Sans MS • Trebuchet MS Italic • Comic Sans MS Bold • Trebuchet MS Bold • Courier New • Trebuchet MS Bold Italic • Courier New Italic • Verdana • Courier New Bold • Verdana Italic • Courier New Bold Italic • Verdana Bold • Georgia • Verdana Bold Italic • Georgia Italic • Webdings • Georgia Bold • Georgia Bold Italic Font Stack Make sure than fonts are similar in appearance so that design appearance won't be impacted. Generic Declarations serif sans-serif monospace cursive fantasy PC Times New Tahoma Courier New Comic Sans Impact Roman Arial Lucida Console Mistral Haettenschweiler Georgia Verdana Monaco Bradley Hand Papyrus Palatino Mac Times Helvetica Monaco Apple Chancery Impact Georgia Lucida Grand Courier Comic Sans Copperplate Baskerville Geneva Andale Mono Zapfino Papyrus Font-family: <ideal>, <alternative>, <common>, <generic> Font-family: Georgia, "Times New Roman", Times, serif; Note that when a font name is constructed from several words – like "Times New Roman" or "Tebuchet MS", it must be enclosed in quotes or it could be ignored. Developing a Font Stack http://www.codestyle.org/servlets/FontStack http://media.24ways.org/2007/17/fontmatrix.html Current Workarounds Use images instead of text 1. Search engines can't index 2. Inaccessible to screen readers 3. If user browsing with images turned off – only ALT tags (if used) would be visible. slFR (Scalable Inman Flash Replacement) 2004 1. Uses flash player to serve up desired fonts 2. Uses javaScript - if flash player installed, loads flash in place of font 3. If user don't have flash – will just display as default Cufón 1. JavaScript-based solution 2. Cufón is uploaded to your server. 3. Use the generator to create a font.js file 4. Reference the file when you want to use it. 5. Text is no selectable 6. Not as effective with body copy 7. Won't work with many font licenses Background Image Replacement h1 { text-indent: -1000em; width:200px; height:75px; background: url(images/diavlo.png); no-repeat; } The @font-face Rule W3C Fonts Module Level3 http://www.w3.org/TR/css3-webfonts/ Web Fonts Support Chrome Explorer Firefox Opera Safari @font-face 4+ 4+ 3.5+ 10+ 3.1+* True Type (ttf) 4+ 3.5+ 10+ 3.1+* Open Type (otf) 4+ 3.5+ 10+ 3.1+* SVG fonts (svg) 4+ 10+ 3.1+* SVGz fonts (eot) 10+ 3.1+* embedded Open Type (eot) 4+ Web Open Font Format (woff) 6+ 9 3.6+ iPhone/iPad supports SVG with added support for TTF as of iOS 4.2 Scalable Vector Graphics (SVG) • Xml language used to create vector graphics • SVG Fonts are included in the standard • SVG Fonts are small in size and look consistent across browsers • SVG Fonts cannot contain hinting and are not universally supported • SVGz is a compressed format of SVG Fonts Embedded Open Type (EOT) • Proprietary font format developed by Microsoft • EOT is a wrapper that subsets and compressed True Type fonts • Additional format properties allow fonts to be bound to a specific page • Microsoft submitted eOT to the W3C in 2008, never formally adopted Web Open Font Format (WOFF) • Developed in 2009 by Mozilla and several font foundries • Adopted by the W3C as a standard in 2010 • WOFF is a wrapper that can contain TT, OTF, or OFF fonts • Fonts are compressed and can be accompanied by xml-based metadata • Browsers have been quick to adopt support for WOFF Font Rendering – Platform Specific Font Rendering on the Mac • Macs use the Core Type rendering engine which used subpixel rendering • Core Type engine ignores font hinting • Smaller text tends to look bolder and more blurry than on other systems Microsoft Rendering Variables • Window systems can be set to use one of three rendering methods • Different versions of Windows use different versions of ClearType, Windows' subpixel rendering engine • The newer version, DirectWrite, anti-aliases along two axis, much like the Mac Core Type rendering engine Microsoft Font Rendering • Text rasterization gives more weight to the pixel grid • Small details may be lost, and the weight of the font is often affected • ClearType tends to render body copy better, but headlines can be jagged • DirectWrite produces better results, but is relatively new Windows Version Rendering Defaults Windows XP Windows Vista Windows 7 ClearType disabled enabled enabled DirectWrite N/A Available* Available Non-IE & IE 6 GDI** ClearType** ClearType** IE 7 ClearType ClearType ClearType IE 8+ ClearType ClearType ClearType IE 9 DirectWrite DirectWrite DirectWrite In all versions, settings can be changed by the user to any rendering method available, including no anti-alias and grayscale anti-alias *Available with update ** uses the system's current rendering, like to be what is listed. GDI performs grayscale anti-aliasing for Windows + overwrites the system setting to ClearWrite, which will then be used by all other browsers until changed Options for Controlling Font Rendering • Choose fonts carefully and look for fonts designed for the screen • The font's size and usage matters in rendering • Test fonts in multiple browsers and platforms before using them Adobe Browser Lab: https://browserlab.adobe.com Typekit Browser Samples http://typekit.com/libraries/full We'll work with two options: Linking to a font service http://code.google.com/webfonts Choose the font you'd like to use. Google web fonts show you both specimen and character views and some basic information about the font. ADD Link REF to your head tag (just below title) <link href='http://fonts.googleapis.com/css?family=Radley' rel='stylesheet' type='text/css'> Add font-family where appropriate in style type. h1 { font-family: Radley, arial, serif; } Downloading a font The League of Moveable Type http://www.theleagueofmoveabletype.com/ Create missing versions to meet our browser and platform needs Choose your font and click on it to download. We'll need to create the other versions (woff, eot, etc.) before we can create our @font-face declaration. Be sure to read the Open Font License to be sure your use will be in compliance! Font Squirrel http://www.fontsquirrel.com Font Squirrel is a great resource for both @face-fonts kits and generating @face-fonts. You'll need to make sure that css is optimized for cross browser compliance. (Font Squirrel will do this for you!) Font Squirrel can also build a @font-face kit (@font-face generator) ADD THE TTF VERSION OF YOUR FONT. My Generated Kit You can also look through Font Squirrel's set of pre-made kits and download. (Downloaded kit shown on right) Now that you have your font kits, you'll need to add them to your web page. I'll show you two different methods. Note: In both cases I've moved my fonts to a folder named "_fonts". You can copy the @font-face code from the generated CCS file (stylesheet.css) You will need to ADD to FOLDER name in order for the fonts to work. @font-face { font-family: 'BenthamRegular'; src: url('_fonts/Bentham-webfont.eot'); src: local('☺'), url('_fonts/Bentham-webfont.woff') format('woff'), url('_fonts/Bentham-webfont.ttf') format('truetype'), url('_fonts/Bentham- webfont.svg#webfontR8SKAqug') format('svg'); font-weight: normal; font-style: normal; } In the second method, you'll link your page to the eXTeRNAL css file. Note: You will need to add the font folder name as well. Linking the CSS. ADD TO THe HeAD TAG (under title) <link href="stylesheet.css" rel="stylesheet" type="text/css"> Make sure that the following are all in the same folder or have the same configuration: _fonts (folder) stylesheet.css yourFile.html .