making drupal beautiful with web fonts

Aaron StanushDallas Drupal Days – July 9, 2011

Making Drupal beautiful with web fontsDesigning in the @font-face of danger

A little bit of history

It only took a decade

• 1997: CSS2 introduces @font-face

• IE4 supports @font-face

• 2008: Safari 3.1 supports @font-face

• 2009: Firefox 3.5 supports @font-face

• 2010: Chrome 4 supports @font-face

• iOS 4 supports TrueType

• Firefox 3.6, Chrome 6, IE9 support WOFF

• W3C publishes working draft for WOFF

Before• sIFR

• Flash-based

• Liked by foundries

• Hated by designers

• Cufón

• Javascript/JSON

• Lightweight

• Not trusted by foundries

After• Web fonts

• CSS + Web font file

• Hosted option

• WOFF = Security

• It’s just text

Then

• Arial

•Georgia

• Trebuchet MS

•Verdana

• Impact

• Times

• Palatino

•Helvetica• Courier New

• Comic Sans

aigcorporate.com

smartmoney.com

lostworldsfairs.com/moon

Now

The new web fontecosystem

Formats WOFFTTF EOT SVG

Font hostingservicesSelf-hosted

&Foundries Designers

Museo Gotham AvenirFonts

@font-face

Commerical fonts

‣ Foundries

‣ Hoefler Frere-Jones, FontFont, House Industries, EmType, exljbris, etc.

‣ Font stores

‣ FontShop.com

‣ MyFonts.com

webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview

Web font licensingIt’s complicated. Everybody has their own rules.

Free and open source

• Font Squirrel

• fontsquirrel.com

• Google Web Fonts

• code.google.com/webfonts

• League of Movable Type

• theleagueofmovabletype.com

• Lost Type Co-op

• losttype.com

theleagueofmoveabletype.com/manifesto

It means that you're allowed to use these fonts personally or commercially, as long as you credit the original creator, and if you made tweaks and changes to the typefaces, any new typefaces resulting from it should be licensed under the same terms. That way all our fonts and any new fonts resulting from them will always be open.

“SIL Open font license

http://scripts.sil.org/OFL

Web font formats

• Embedded OpenType (EOT)

• TrueType + DRM

• Created by Microsoft

• TrueType (TTF)

• Standard desktop format

• SVG

• Used for iOS 3

• Web Open Font Format (WOFF)

• W3C standard (soon)

• 40% smaller than TTF

• Contains metadata

Credit: shoze.blogspot.com

Why do we need all these crazy font formats?

webfonts.info/wiki/index.php?title=@font-face_browser_support

Firefox 3.6+ Chrome 6+ IE 6-8 IE9 Safari 3.1+ iOS 4.2 Android 2.2

EOT • •TTF • • • • •SVG • •

WOFF • • •

@font-face browser support

@font-face kits

• Multiple file types

• EOT, WOFF, TTF, SVG, Cufon, HTML, CSS

• Pre-built kits

• fontsquirrel.com/fontface

• Build your own

• fontsquirrel.com/fontface/generator

The bulletproof@font-face method

@font-face { font-family: Gotham; src: url('gotham.ttf'); }

@font-face

fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

@font-face { font-family: 'Gotham'; src: url('gotham.eot') format('eot'), src: url('gotham.eot?#iefix') format('embedded-opentype'), url('gotham.woff') format('woff'), url('gotham.ttf') format('truetype'), url('gotham.svg#gotham') format('svg'); }

the real @font-face

IE9 compatibility mode

EOT: IE9 compatibility mode

@font-face { font-family: 'Gotham'; src: url('gotham.eot') format('eot'), src: url('gotham.eot?#iefix') format('embedded-opentype'), url('gotham.woff') format('woff'), url('gotham.ttf') format('truetype'), url('gotham.svg#gotham') format('svg'); }

Unfortunately, you need the ?# to trick IE.

@font-face { font-family: 'Gotham'; src: url('gotham.eot') format('eot'), src: url('gotham.eot?#iefix') format('embedded-opentype'), url('gotham.woff') format('woff'), url('gotham.ttf') format('truetype'), url('gotham.svg#gotham') format('svg'); }

EOT: IE6, 7, 8

WOFF: Chrome, Firefox, IE9

@font-face { font-family: 'Gotham'; src: url('gotham.eot') format('eot'), src: url('gotham.eot?#iefix') format('embedded-opentype'), url('gotham.woff') format('woff'), url('gotham.ttf') format('truetype'), url('gotham.svg#gotham') format('svg'); }

@font-face { font-family: 'Gotham'; src: url('gotham.eot') format('eot'), src: url('gotham.eot?#iefix') format('embedded-opentype'), url('gotham.woff') format('woff'), url('gotham.ttf') format('truetype'), url('gotham.svg#gotham') format('svg'); }

TTF: iOS 4, legacy browsers

If the # value was not provided for you, open the SVG file in a text editor and look for:font id="mySVGFontName"

@font-face { font-family: 'Gotham'; src: url('gotham.eot') format('eot'), src: url('gotham.eot?#iefix') format('embedded-opentype'), url('gotham.woff') format('woff'), url('gotham.ttf') format('truetype'), url('gotham.svg#gotham') format('svg'); }

SVG: iOS 3

The joy of multiple weights

@h1 { font-family: Verdana;

font-weight: bold; }

Bold and non-bold. Hooray.

@h2 { font-family: Verdana; font-weight: normal; }

Verdana boldVerdanaVerdana bold italicVerdana italic

Gotham LightGotham Light ItalicGotham BookGotham Book ItalicGotham MediumGotham Medium ItalicGotham BoldGotham Bold ItalicGotham BlackGotham Black Italic

Real fonts have big families

Variant font-weight font-styleGotham Light 100 normalGotham Light Italic 100 italicGotham Book 200 normalGotham Book Italic 200 italicGotham Medium 300 normalGotham Medium Italic 300 italicGotham Bold 400 normalGotham Bold Italic 400 italicGotham Black 500 normalGotham Black Italic 500 italic

You can apply the same font-family name to each variant, as long as you

set the font-weight and font-style for each.

@font-face { font-family: ‘Gotham Light’;

src: url('gotham-light.ttf') format('truetype'); font-weight: 100;

}

h2 { font-family: ‘Gotham Light’; }

Calling each font by name. Eh.

@font-face { font-family: ‘Gotham’;

src: url('gotham-light.ttf') format('truetype'); font-weight: 100;

}

h1 { /* Gotham Black */ font-family: ‘Gotham’; font-weight: 500; }

One family, many weights. Boom.

@font-face { font-family: ‘Gotham’; src: url('gotham-black.ttf') format('truetype'); font-weight: 500; }

h2 { /* Gotham Light */ font-family: ‘Gotham’; font-weight: 100; }

456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple

@font-face { font-family: ‘Gotham’;

src: url('gotham-light-italic.ttf') format('truetype'); font-weight: 100;font-style: italic;

}

.caption { font-family: ‘Gotham’; font-weight: 100; font-style: italic; }

456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple

Italics too

Web font hosting services

Web font hosting

• Pros

• Large selection of high-quality fonts

• Very little coding

• No worrying about licensing

• No expensive font purchases

• Cons

• Not free: Pay by pageviews or per font

• No desktop version of the font

• Dependent on third-party service

Web font hosting services

• Paid

• Typekit.com

• webfonts.fonts.com

• Fontdeck.com

• Kernest.com

• Free

• google.com/webfonts

Who’s the best?bit.ly/web-font-hosts

Web fonts in Drupal

@font-your-face module

• Supports multiple font-hosting services

• No Javascript to add to your templates

• Browse font collection inside Drupal

• Assign CSS selectors through the UI

drupal.org/projects/font-your-face

Best practices

Best practices

• Only load the fonts you need

• Always use fallback fonts

• FOUT - Flash of Unstyled Text

• Font events

• Test, test, test

Web design isexciting again

lostworldsfairs.com

Aaron Stanushaaron@fourkitchens.com

slideshare.net/fourkitchensfourkitchens.com/presentations

@aaronstanush

All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2009 Four Kitchen Studios, LLC.

Thanks!