@!

THE NEW WEB TYPOGRAPHY #1WHAT IS A WEBFONT?

Create

d By:

Jason

Cran

ford T

eagu

e | m

e@jas

onsp

eakin

g.com

| www

.fluidw

ebtyp

e.info

| t: @

fluidw

ebtyp

e | U

pdate

d: We

d May

25 20

11

✔!f10

CORE WEB FONTSMicrosoft licensed ten typefaces to be installed on all PCs. Apple also provided the same fonts, making them the most commonly available typefaces, and thus the default choice for most designers. The list originally included 11 typeface, but Microsoft no longer includes Andale Mono.

@font-­‐face  {font-­‐family:  'My  Font  Name';src:  url('../fonts/myfont-­‐webfont.eot');src:  url('../fonts/myfont-­‐webfont.eot?#iefix')  format('embedded-­‐opentype'),  

url('../fonts/myfont-­‐webfont.woff')  format('woff'),     url('../fonts/myfont-­‐webfont.ttf')    format('truetype');font-­‐weight:  normal;  font-­‐style:  normal;

}

.mySelector  {  font-­‐family:  'My  Font  Name',  serif;  }

✔

✗

66COMMON DENOMINATORSSixty-six of the Web Safe Fonts are commonly installed on both Macs and Windows machines, making them the sweet spot for cross platform design.

Arial Narrow • Arial Rounded MT Bold • Baskerville Old Face • Bauhaus

93 • Bell MT • Book Antiqua • Bookman Old Style • Bradley Hand

ITC • Britannic Bold • Brush Script MT • Calibri • Calisto MT • Cambria • Candara • Century Gothic • Century Schoolbook • Colonna MT • Consolas • Constantia • Cooper Black • Copperplate Gothic

Bold • Copperplate Gothic Light • Corbel • Curlz MT • Edwardian Script ITC • Engravers MT • Footlight MT Light • Franklin Gothic Medium • Garamond • Gill Sans MT • Gill Sans Ultra Bold • Gloucester MT Extra Condensed • Goudy Old Style • Haettenschweiler • Harrington • Imprint MT Shadow • Lucida Bright • Lucida Calligraphy• Lucida Console • Lucida Fax • Lucida Sans • Lucida Handwriting • Lucida Sans Typewriter • Lucida Sans Unicode • Mistral • MS Reference Sans Serif • Modern No. 20 • Onyx • Palatino • Papyrus • Perpetua • Perpetua Titling MT • Playbill • Rockwell • Rockwell Extra Bold • STENCIL • Tahoma • Tw Cen MT • Wide Latin

5FATAL FIVE FONTSAlthough there are 10 core webfonts, only five are commonly used in web designs:

ArialGeorgiaTimes New RomanTrebuchet MSVerdana

&!

NOTE: The ?#iefix after the .eot extension is needed in order for the code to work in Internet Explorer before v9. For the full story on this, visit: http://bit.ly/bulletproof-font-face-syntax .

FIVEWEBFONT FORMATSAlthough virtually all web browsers support webfonts today, not all of them support the same font fie formats. There are five basic formats supported, with the following file extensions. Browser support with first version support was included is listed in the table below.

.eot — Embedded Open Type

.ttf — True Type Format

.otf — Open Type Format

.svg — Scalable Vector Graphic

.woff— Web Open Font Format

/fonts

myfont-­‐webfont.eot

myfont-­‐webfont.svg

myfont-­‐webfont.ttf

myfont-­‐webfont.woff

Although it is estimated that there are more than one hundred fifty thousand different digital fonts, that does not mean you can 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 font with @font-­‐face, so you should not use them. If in doubt, check with the font manufacturer before using as a webfont.

FONT, FAMILY, or TYPEFACE?The terms font and type face are often used synonymously, although they are not the same thing. A typeface — also referred to as a font family. — 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 fonts and font for individual styles.

150,000+ALL DIGITAL FONTS

!f @!

WWW.FLUIDWEBTYPE.INFO

Blackberry

! 6! 2.2

DroidiOS

! 4.2

! 3.1

Opera

! 11

! 10

! 10

! 6

! 0.3

Chrome

! 3.1

Safari

! 3.1

! 3.6

Firefox

! 3.5

WOFF ! 9

SVG/SVGz

FORMAT

EOT/EOT Lite

Internet Explorer

! 4

TTF/OTF

WEB FONT or WEBFONT?A "web font" or "webfont" is any font used to style HTML text. Both versions of the word are acceptable (with or without the space) but Webfont is becoming increasingly common, especially when referring to fonts delivered using @font-­‐face.

✔40,000+WEBFONTSWebfonts are downloadable font file that can be used by a Web browser to display text. Webfonts come in different formats which are supported by different browsers, but virtually all browsers support Webfonts now, including Internet Explorer. Of the 100K digital fonts, around forty thousand have been licensed for @font-face usage and the list is constantly growing.

ADDING WEBFONTS TO YOUR DESIGNTo add a font to your Webpage, use the @font-­‐face rule. Although in theory only one source is needed, in order to accommodate different browsers, you will need to add source for the different file types you want to support.

182 WEB SAFE FONTSBoth Mac and Windows computers have a list of fonts that are always installed. Additionally, commonly installed software such as Microsoft Office and Apple iLife include more fonts. From this, we can derive a list of one-hundred eighty-two additional fonts that are commonly installed on most computers. For the full list, visit http://bit.ly/web-safe-fonts .