• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Making drupal beautiful with web fonts
 

Making drupal beautiful with web fonts

on

  • 7,092 views

 

Statistics

Views

Total Views
7,092
Views on SlideShare
6,981
Embed Views
111

Actions

Likes
6
Downloads
57
Comments
0

3 Embeds 111

http://www.linkedin.com 109
http://blog.naver.com 1
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Making drupal beautiful with web fonts Making drupal beautiful with web fonts Presentation Transcript

    • Making Drupal beautiful with web fonts Designing in the @font-face of dangerAaron StanushDallas Drupal Days – July 9, 2011
    • 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 After• sIFR • Web fonts • Flash-based • CSS + Web font file • Liked by foundries • Hosted option • Hated by designers • WOFF = Security• Cufón • It’s just text • Javascript/JSON • Lightweight • Not trusted by foundries
    • Then• Arial • Times• Georgia • Palatino• Trebuchet MS • Helvetica• Verdana • Courier New• Impact • Comic Sans
    • aigcorporate.com
    • smartmoney.com
    • Nowlostworldsfairs.com/moon
    • The new web fontecosystem
    • Foundries & Designers Fonts Museo Gotham Avenir Formats TTF WOFF EOT SVG @font-face Font hosting Self-hosted services
    • Commerical fonts‣ Foundries ‣ Hoefler Frere-Jones, FontFont, House Industries, EmType, exljbris, etc.‣ Font stores ‣ FontShop.com ‣ MyFonts.com
    • Web font licensingIt’s complicated. Everybody has their own rules.webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview
    • 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
    • SIL Open font license“ It means that youre 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. http://scripts.sil.org/OFLtheleagueofmoveabletype.com/manifesto
    • Web font formats• Embedded OpenType (EOT) • Web Open Font Format (WOFF) • TrueType + DRM • W3C standard (soon) • Created by Microsoft • 40% smaller than TTF• TrueType (TTF) • Contains metadata • Standard desktop format• SVG • Used for iOS 3
    • Why do we need all these crazy font formats?Credit: shoze.blogspot.com
    • @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 • • •webfonts.info/wiki/index.php?title=@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-face { font-family: Gotham; src: url(gotham.ttf); }
    • the real @font-face @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); }fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
    • 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); } IE9 compatibility mode
    • EOT: IE6, 7, 8@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.
    • 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); }
    • TTF: iOS 4, legacy browsers@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@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); } If the # value was not provided for you, open the SVG file in a text editor and look for: font id="mySVGFontName"
    • The joy of multipleweights
    • Bold and non-bold. Hooray. Verdana Verdana bold Verdana italic Verdana bold italic@h1 { font-family: Verdana; font-weight: bold; }@h2 { font-family: Verdana; font-weight: normal; }
    • Real fonts have big familiesGotham LightGotham Light ItalicGotham BookGotham Book ItalicGotham MediumGotham Medium ItalicGotham BoldGotham Bold ItalicGotham BlackGotham Black Italic
    • 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 youset the font-weight and font-style for each.
    • Calling each font by name. Eh.@font-face { font-family: ‘Gotham Light’; src: url(gotham-light.ttf) format(truetype); font-weight: 100; }h2 { font-family: ‘Gotham Light’; }
    • One family, many weights. Boom. @font-face { font-family: ‘Gotham’; src: url(gotham-light.ttf) format(truetype); font-weight: 100; } @font-face { font-family: ‘Gotham’; src: url(gotham-black.ttf) format(truetype); font-weight: 500; } h1 { /* Gotham Black */ h2 { /* Gotham Light */ font-family: ‘Gotham’; font-family: ‘Gotham’; font-weight: 500; font-weight: 100; } }456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple
    • Italics too @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
    • Web font hostingservices
    • Web font hosting• Pros • Cons • Large selection of • Not free: Pay by high-quality fonts pageviews or per font • Very little coding • No desktop version • No worrying about of the font licensing • Dependent on third- • No expensive font party service purchases
    • Web font hosting services• Paid • Free • Typekit.com • google.com/ webfonts • webfonts.fonts.com • Fontdeck.com • Kernest.com
    • 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 @aaronstanushfourkitchens.com/presentations slideshare.net/fourkitchens
    • Thanks! All content in this presentation, except where noted otherwise, is Creative Commons Attribution- ShareAlike 3.0 licensed and copyright 2009 Four Kitchen Studios, LLC.