SlideShare a Scribd company logo

Responsive Web Fonts

10 minute talk given at Responsive Day Out on 1st March 2013.

1 of 24
Download to read offline
Responsive
                            Web Fonts

                                Richard Rutter


                                  Responsive Day Out 2013


I’ve got under ten minutes to talk about web fonts. So here goes. I'm going to start with
something slow.
Who has had this experience? Loading in several web fonts over a slow connection can be…
slow. The browser lays out the page but doesn’t display text until the web font loads.
1. Default: text appears as each web
       font loads

    2. Don’t send web fonts to small screens

    3. Show text in the fallback fonts until
       all the web fonts load

    4. Swap out the fallback font as each
       web font loads


You have some choices.
Stopping web fonts
      downloading to small screens


      <link
      	
  	
  href="webfonts.css"
      	
  	
  rel="stylesheet"
      	
  	
  media="all	
  and	
  (min-­‐width:	
  569px)"
      />




There’s lots of ways to do this. This way assumes that webfonts.css contains your @font-face
rules, as if you were using Fontdeck or another webfont service.
Show text in the fallback font
      until all the web fonts load


      <script>
      //	
  WebFont	
  Loader
      //	
  http://goo.gl/zT2YJ
      </script>




Javascript solution. Uses Webfont Loader. Loads all the fonts.
Can use it with any web font service, including Google webfonts or Fontdeck and it comes
built into Typekit. Also with self-hosted.
WebFont Loader
       <script	
  type="text/javascript">
       WebFontConfig	
  =	
  {	
  fontdeck:	
  {	
  id:	
  '11761'	
  }	
  };

       (function()	
  {
       	
  	
  var	
  wf	
  =	
  document.createElement('script');
       	
  	
  wf.src	
  =	
  ('https:'	
  ==	
  document.location.protocol	
  ?	
  'https'	
  :	
  
       'http')	
  +
       	
  	
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
       	
  	
  wf.type	
  =	
  'text/javascript';
       	
  	
  wf.async	
  =	
  'true';
       	
  	
  var	
  s	
  =	
  document.getElementsByTagName('script')[0];
       	
  	
  s.parentNode.insertBefore(wf,	
  s);
       })();
       </script>




Looks like this. But that’s not important right now - it’s just a cut a paste and job.
Ad

Recommended

Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009Paul Irish
 
Employing Custom Fonts
Employing Custom FontsEmploying Custom Fonts
Employing Custom FontsPaul Irish
 
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...Eric Fickes
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fontsFour Kitchens
 
We heart it! Evoking emotion through typography
We heart it! Evoking emotion through typographyWe heart it! Evoking emotion through typography
We heart it! Evoking emotion through typographyChiara Aliotta
 

More Related Content

Similar to Responsive Web Fonts

The New Web Typography
The New Web TypographyThe New Web Typography
The New Web TypographyForum One
 
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsThe NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsJason CranfordTeague
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
Web programming by kiran and team
Web programming by kiran and teamWeb programming by kiran and team
Web programming by kiran and teamHemanth Kumar N
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbookFour Kitchens
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsPrototype Interactive
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011RZasadzinski
 
Cool Stuff for Web Typography
Cool Stuff for Web TypographyCool Stuff for Web Typography
Cool Stuff for Web TypographyOliver Linke
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap InsightsMonaca
 
To Hell with Web Safe Fonts
To Hell with Web Safe FontsTo Hell with Web Safe Fonts
To Hell with Web Safe FontsLennart Schoors
 
用Flutter 開發Linux Desktop Application
用Flutter 開發Linux Desktop Application用Flutter 開發Linux Desktop Application
用Flutter 開發Linux Desktop ApplicationWan Leung Wong
 
Why CSS Was Invented (Håkon Wium Lie)
Why CSS Was Invented (Håkon Wium Lie)Why CSS Was Invented (Håkon Wium Lie)
Why CSS Was Invented (Håkon Wium Lie)Future Insights
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typographyFour Kitchens
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalAshok Modi
 

Similar to Responsive Web Fonts (20)

The New Web Typography
The New Web TypographyThe New Web Typography
The New Web Typography
 
The NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy IsThe NEW Web Typography: Where the Sexy Is
The NEW Web Typography: Where the Sexy Is
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 
WEB and FONTS
WEB and FONTSWEB and FONTS
WEB and FONTS
 
CSS font-stacks
CSS font-stacksCSS font-stacks
CSS font-stacks
 
Web programming by kiran and team
Web programming by kiran and teamWeb programming by kiran and team
Web programming by kiran and team
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbook
 
Fonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fontsFonts on the Web - a guide to web fonts
Fonts on the Web - a guide to web fonts
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Cool Stuff for Web Typography
Cool Stuff for Web TypographyCool Stuff for Web Typography
Cool Stuff for Web Typography
 
Web fonts
Web fontsWeb fonts
Web fonts
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
 
To Hell with Web Safe Fonts
To Hell with Web Safe FontsTo Hell with Web Safe Fonts
To Hell with Web Safe Fonts
 
用Flutter 開發Linux Desktop Application
用Flutter 開發Linux Desktop Application用Flutter 開發Linux Desktop Application
用Flutter 開發Linux Desktop Application
 
Why CSS Was Invented (Håkon Wium Lie)
Why CSS Was Invented (Håkon Wium Lie)Why CSS Was Invented (Håkon Wium Lie)
Why CSS Was Invented (Håkon Wium Lie)
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typography
 
Drupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for DrupalDrupal Camp LA 2011: Typography modules for Drupal
Drupal Camp LA 2011: Typography modules for Drupal
 
Cgi perl
Cgi  perlCgi  perl
Cgi perl
 
Web Typography
Web TypographyWeb Typography
Web Typography
 

Recently uploaded

HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfLizShek
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfLizShek
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.JIT KUMAR GUPTA
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfLizShek
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfLizShek
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRSurfaced - Designs By Meera Narula
 
Ordering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxOrdering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxTafshirul Alam
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptAr. TANIA BERA
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfaekhan1019
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxRawalRafiqLeghari
 
Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxBashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxTafshirul Alam
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfssuser799b33
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--characterschell
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfUla Academics
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city JodhpurSreyaseeNath1
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaJayeola Samuel
 

Recently uploaded (20)

HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdf
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdf
 
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
Bring Your Office Interiors Back to Life The Enchantment of Personalized Wall...
 
Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.Land Management and sourcing land for sustainable Urban Development.
Land Management and sourcing land for sustainable Urban Development.
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdf
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdf
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
Studio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCRStudio Surfaced - Textile Design Studio based out of Delhi NCR
Studio Surfaced - Textile Design Studio based out of Delhi NCR
 
Ordering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptxOrdering Principles in Architecture-MaHi.pptx
Ordering Principles in Architecture-MaHi.pptx
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
 
Communicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptxCommunicative Grammar English .pnnnnkkptx
Communicative Grammar English .pnnnnkkptx
 
Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptxBashundhara Residential _ Analysis and Case Study-MaHi.pptx
Bashundhara Residential _ Analysis and Case Study-MaHi.pptx
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--character
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdf
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city Jodhpur
 
Portfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel JayeolaPortfolio of designs and Visualization Samuel Jayeola
Portfolio of designs and Visualization Samuel Jayeola
 

Responsive Web Fonts

  • 1. Responsive Web Fonts Richard Rutter Responsive Day Out 2013 I’ve got under ten minutes to talk about web fonts. So here goes. I'm going to start with something slow.
  • 2. Who has had this experience? Loading in several web fonts over a slow connection can be… slow. The browser lays out the page but doesn’t display text until the web font loads.
  • 3. 1. Default: text appears as each web font loads 2. Don’t send web fonts to small screens 3. Show text in the fallback fonts until all the web fonts load 4. Swap out the fallback font as each web font loads You have some choices.
  • 4. Stopping web fonts downloading to small screens <link    href="webfonts.css"    rel="stylesheet"    media="all  and  (min-­‐width:  569px)" /> There’s lots of ways to do this. This way assumes that webfonts.css contains your @font-face rules, as if you were using Fontdeck or another webfont service.
  • 5. Show text in the fallback font until all the web fonts load <script> //  WebFont  Loader //  http://goo.gl/zT2YJ </script> Javascript solution. Uses Webfont Loader. Loads all the fonts. Can use it with any web font service, including Google webfonts or Fontdeck and it comes built into Typekit. Also with self-hosted.
  • 6. WebFont Loader <script  type="text/javascript"> WebFontConfig  =  {  fontdeck:  {  id:  '11761'  }  }; (function()  {    var  wf  =  document.createElement('script');    wf.src  =  ('https:'  ==  document.location.protocol  ?  'https'  :   'http')  +    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';    wf.type  =  'text/javascript';    wf.async  =  'true';    var  s  =  document.getElementsByTagName('script')[0];    s.parentNode.insertBefore(wf,  s); })(); </script> Looks like this. But that’s not important right now - it’s just a cut a paste and job.
  • 7. WebFont Loader <html  class="wf-­‐loading"> .wf-­‐loading    //  When  the  fonts  start  to  load .wf-­‐active      //  All  fonts  have  loaded  (or  some  timed  out) .wf-­‐inactive  //  If  all  the  fonts  failed  to  load Sets classes according to status of fonts
  • 8. Swap out fallbacks when all web fonts have loaded p  {    font-­‐family:  serif; } .wf-­‐active  p  {    font-­‐family:  'Abril  Text',  serif; } h1  {    font-­‐family:  sans-­‐serif; } .wf-­‐active  h1  {    font-­‐family:  'Tablet  Gothic  Condensed',  sans-­‐serif; } h2  {    font-­‐family:  sans-­‐serif; } .wf-­‐active  h2  {    font-­‐family:  'Tablet  Gothic  Condensed',  sans-­‐serif; Swap out fallback fonts for webfonts once all webfonts have loaded. Have to do it everywhere you're specifying a webfont.
  • 10. Swap out fallbacks when each webfont loads <html  class="wf-­‐loading  wf-­‐abriltext-­‐n4-­‐active"> p  {    font-­‐family:  serif; } . wf-­‐abriltext-­‐n4-­‐active  p  {    font-­‐family:  'Abril  Text',  serif; } h1  {    font-­‐family:  sans-­‐serif; } .wf-­‐tabletgothiccondensed-­‐active  h1  {    font-­‐family:  'Tablet  Gothic  Condensed',  sans-­‐serif; } h2  {    font-­‐family:  sans-­‐serif; Webfont loader also tells you statuses of each individual font
  • 12. Only use WebFont Loader on larger screens <script> if  (window.innerWidth>548)  {    //  WebFont  Loader    //  http://goo.gl/zT2YJ } </script> Do a check for screen size.
  • 13. Let's look at the fallbacks again.
  • 14. Fallback fonts Main Heading Set in the Webfont Main Heading Set in the Fallback Tablet Gothic Condensed Extra Bold Helvetica Neue Condensed Black The changes weren't that big, even the main headline font.
  • 15. Tweak fallback metrics to match webfont h1  {    font-­‐family:  'HelveticaNeue-­‐CondensedBlack',  sans-­‐serif;    font-­‐size:86px;    line-­‐height:1.01;    font-­‐weight:800; } .wf-­‐tabletgothiccondensed-­‐active  h1  {    font-­‐family:  'Tablet  Gothic  Condensed',                              'HelveticaNeue-­‐CondensedBlack',  sans-­‐serif;    font-­‐size:96px;    line-­‐height:0.9; } Can use webloader classes not just to change fonts but to tweak sizes to match more closely.
  • 16. Fallback fonts – iOS 6.1 American Typewriter Helvetica Arial Helvetica Neue Avenir Hoefler Text Avenir Next Marion Marker Felt Avenir Next Condensed Baskerville Noteworthy Bodoni 72 Optima Bradley Hand Palatino Chalkboard SE Papyrus Chalkduster Party LET Cochin Snell Roundhand Lots of Copperplate even more with iOS 6. These are justRoman ones. fonts come with iOS, Times New the Latin But iPhones aren't the only smartphones. Courier Trebuchet MS
  • 17. Windows. We have a problem with heading in particular.
  • 18. Fallback fonts Main Heading Set in the Webfont Main Heading Set in the Fallback Tablet Gothic Condensed Extra Bold The best we could do is fall back to Segoe UI Bold.
  • 19. Fallback fonts – Win Phone 7 Arial Courier New Arial Black Georgia Calibri Lucida Grande Cambria Lucida Sans Unicode Comic Sans MS Segoe UI Tahoma Candara Consolas Times New Roman Trebuchet MS Constantia Verdana Corbel These are the fonts that ship with Windows Phone 7. Decent selection but nothing narrow or condensed, not even Arial Narrow. Of course on Android phones there's even less choice.
  • 21. Fallback fonts – Android 4 Droid Sans Droid Sans Mono Droid Serif Roboto Most just ship with the three flavours of Droid. Android 4 comes with Roboto (designed for high res screens).
  • 22. Font stack .wf-­‐active  h1  {    font-­‐family:      'Tablet  Gothic  Condensed',      'HelveticaNeue-­‐CondensedBlack',      'Helvetica  Neue',      'Segoe  UI',      'Roboto',      sans-­‐serif;    font-­‐weight:800;    font-­‐stretch:condensed; } Here a potential font stack including fallbacks for iOS, WP7 and Android 4. No need to include Droid Sans (ever).
  • 23. 1. Default: text appears as each web font loads 2. Don’t send web fonts to small screens 3. Show text in the fallback fonts until all the web fonts load 4. Swap out the fallback font as each web font loads Here are your choices again.
  • 24. Richard Rutter, Fontdeck.com @clagnut http://webtypography.net/talks/rdo13/ Richard Rutter is cofounder of Fontdeck.com, the professional webfont service. I thank you.