THE NEW WEB #1 WHAT IS A WEBFONT?

+ Although it is estimated that there are more than one hundred fifty thousand different digital , that does not mean you can 150,000 legally use them in your web designs as webfonts. Fonts are small pieces of software subject to End User License Agreements (EULAs) which control what you can and can not legally do with them. Most fonts do not include the right to use the with ✗ALL DIGITAL FONTS@font-face, so you should not use them. If in doubt, check with the font manufacturer before using as a webfont.

f f 10! 182! 40,000@+ ! ✔CORE WEB FONTS ✔WEB SAFE FONTS ✔WEBFONTS licensed ten to be installed on all PCs. Both Mac and Windows have a list of fonts that Webfonts are downloadable font file that can be used by a Apple also provided the same fonts, making them the most are always installed. Additionally, commonly installed to display text. Webfonts come in different commonly available typefaces, and thus the default choice software such as and Apple iLife include formats which are supported by different browsers, but for most designers. The list originally included 11 , more fonts. From this, we can derive a list of one-hundred virtually all browsers support Webfonts now, including but Microsoft no longer includes Andale Mono. eighty-two additional fonts that are commonly installed on . Of the 100K digital fonts, around forty most computers. For the full list, visit http://bit.ly/web- thousand have been licensed for @font-face usage and the safe-fonts . list is constantly growing.

5  66 &! FIVE  FATAL FIVE FONTS COMMON DENOMINATORS WEBFONT FORMATS Although there are 10 core webfonts, only five are Sixty-six of the Web Safe Fonts are commonly installed on Although virtually all web browsers support webfonts commonly used in web designs: both Macs and Windows machines, making them the sweet today, not all of them support the same font fie formats. spot for cross platform design. There are five basic formats supported, with the following file extensions. Browser support with first version support Arial Narrow • Arial Rounded MT Bold • Old Face • Bauhaus was included is listed in the table below. 93 • MT • Book • Bookman Old Style • Bradley Hand ITC • Britannic Bold • Brush Script MT • • Calisto MT • .eot — Embedded Open Type Trebuchet MS • • • Century Schoolbook • Colonna MT • .ttf — True Type Format • • • .otf — Open Type Format Bold • Copperplate Gothic Light • • MT • Edwardian .svg — Scalable Vector Graphic Script ITC • Engravers MT • Footlight MT Light • Medium • • MT • Gill Sans Ultra Bold • .woff — Gloucester MT Extra Condensed • Goudy Old Style • Haettenschweiler • Harrington • MT Shadow • Bright • Lucida • Lucida Console • Lucida Fax • Lucida Sans • Lucida Handwriting • Lucida Sans Typewriter • Lucida Sans WEB FONT or WEBFONT? • • MS Reference Sans • Modern No. 20 • Onyx • Mistral A "web font" or "webfont" is any font used to style HTML • • • • Playbill • Perpetua Titling MT text. Both versions of the word are acceptable (with or FONT, FAMILY, or TYPEFACE? • Rockwell Extra Bold • STENCIL • • Tw Cen MT • Wide Latin without the space) but Webfont is becoming increasingly The terms font and type face are often used synonymously, common, especially when referring to fonts delivered using although they are not the same thing. A typeface — also @font-face. referred to as a . — is a collection of similar fonts but with different weights or styles. For example, Times is a type face. A font is a particular weight or style within the typeface. For example Times Bold is a font. Despite this, most people will refer to a "font" when they really mean font family. I'll use family to refer to a group of FORMAT fonts and font for individual styles. Internet Explorer Chrome iOS Droid Blackberry

EOT/EOT Lite ! 4

TTF/OTF ! 3.5 ! 3.1 ! 10 ! 4.2 ! 2.2 ! 6

WWW.FLUIDWEBTYPE.INFO SVG/SVGz ! 3.1 ! 0.3 ! 10 ! 3.1

WOFF ! 9 ! 3.6 ! 6 ! 11

ADDING WEBFONTS TO YOUR DESIGN NOTE: The ?#iefix after the .eot extension is To add a font to your Webpage, use the @font-face needed in order for the code to work in Internet rule. Although in theory only one source is needed, in order Explorer before v9. For the full story on this, visit: to accommodate different browsers, you will need to add http://bit.ly/bulletproof-font-face-syntax . source for the different file types you want to support. @font-face {  font-family: 'My Font Name'; /fonts src: url('../fonts/myfont-webfont.eot');  myfont-webfont.eot src: url('../fonts/myfont-webfont.eot?#iefix') format('embedded-'),  myfont-webfont.svg url('../fonts/myfont-webfont.woff') format('woff'), url('../fonts/myfont-webfont.ttf') format('');  myfont-webfont.ttf font-weight: normal; font-style: normal;  myfont-webfont.woff }

.mySelector { font-family: 'My Font Name', serif; } @! Created By: Jason Cranford Teague | [email protected] www.fluidwebtype.info t: @fluidwebtype Updated: Wed May 25 2011