making drupal beautiful with web fonts
DESCRIPTION
TRANSCRIPT
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
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!