Web Basics

The following are installed on both Windows XP and Mac OS X Panther by Default

• • • Arial Italic • Times New Roman Italic • Arial Bold • Times New Roman Bold • Arial Bold Italic • Times New Roman Bold Italic • Arial Black • Trebuchet MS • MS • Trebuchet MS Italic • Comic Sans MS Bold • Trebuchet MS Bold • New • Trebuchet MS Bold Italic • Courier New Italic • • Courier New Bold • Verdana Italic • Courier New Bold Italic • Verdana Bold • • Verdana Bold Italic • Georgia Italic • • 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 sans-serif cursive fantasy PC Times New Courier New Comic Sans Roman Arial Console Mistral Georgia Verdana Bradley Hand Mac Times Monaco Apple Chancery Impact Georgia Lucida Grand Courier Comic Sans Copperplate Andale Mono Papyrus

Font-family: , , , 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 . 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 @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+ (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 • EOT is a wrapper that subsets and compressed True Type fonts • Additional format properties allow fonts to be bound to a specific • 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 -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 • Core Type engine ignores • 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 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 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 '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)

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(''), 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)

Make sure that the following are all in the same folder or have the same configuration:

_fonts (folder) stylesheet.css yourFile.html