SlideShare a Scribd company logo
1 of 63
Download to read offline
EMPLOYING CUSTOM
     FONTS...
     NOW!!!

             Paul Irish
            Molecular Inc.
 Emerging Interactions & Front-end Dev
@FONT-FACE
@FONT-FACE
• .eot and .ttf/.otf embedding
• Available in FF 3.5, Safari 3.2, Opera 10 ....
  and all IE for .eot
@FONT-FACE
• .eot and .ttf/.otf embedding
• Available in FF 3.5, Safari 3.2, Opera 10 ....
  and all IE for .eot
Employing Custom Fonts
FONT FORMAT
             PROPOSALS
• .webfont ➡ .webOTF ➡ WOFF
  • All (mostly) foundries ♥ it, nearly ideal solution
  • Mozilla is championing it
• EOT-Lite
  • Proposed by Ascender
  • EOT minus the domain binding and MTX
    compression
  • Works in IE today
SO THEN
 WHAT?
THE LANDSCAPE

• @font-face
• Rich Type Libraries
 •   sIFR, Facelift, typeface.js, Cufón
• FaaS Shops
 •   Typekit, Fontdeck, Typotheque, Kernest
FONTS AS A SERVICE
        FaaS
TYPOTHEQUE

• Actual foundry, their fonts and others
• CSS only
• Files not cached at all
• Relatively small typeface roster
• Pricing model unknown
KERNEST
• CSS only
• A mix of free and commercial fonts,
 100 total

• $0-15/font/year
• No caching
FONTDECK


• Great team behind it from Clearleft,
 including Richard Rutter

• No code yet
• No news
TYPEKIT

• From Small Batch, Inc: Jeff Veen, etc
• Include a javascript file. No fallback
• They deal with licensing, you pay buffet style, 250+
  fonts

• All files hosted on CDN.
  • Cached for 5 minutes, with etags
TYPEKIT

• From Small Batch, Inc: Jeff Veen, etc
• Include a javascript file. No fallback
• They deal with licensing, you pay buffet style, 250+
  fonts

• All files hosted on CDN.
  • Cached for 5 minutes, with etags
TYPEKIT

• From Small Batch, Inc: Jeff Veen, etc
• Include a javascript file. No fallback
• They deal with licensing, you pay buffet style, 250+
  fonts

• All files hosted on CDN.
  • Cached for 5 minutes, with etags
YO, I ROLL SOLO
   Making your own FaaS
YOUR OWN FONT
            SERVICE
1.You get fonts
2.You verify the license permits your plans
3.You serve fonts to browsers that support @font-
  face
4.You protect the font data as much as possible
5.You provide a fallback for the rest of the
  browsers
6.You win life
ACQUIRING FONTS

• Free fonts
 • Fontsquirrel, League of Movable Type,
   WebFonts.info wiki

• Proprietary fonts
 • Custom-designed typefaces for your client
• Commercial fonts
ACQUIRING FONTS

• Free fonts
 • Fontsquirrel, League of Movable Type,
   WebFonts.info wiki

• Proprietary fonts
 • Custom-designed typefaces for your client
• Commercial fonts
ACQUIRING FONTS

• Free fonts
 • Fontsquirrel, League of Movable Type,
   WebFonts.info wiki

• Proprietary fonts
 • Custom-designed typefaces for your client
• Commercial fonts
ACQUIRING FONTS

• Free fonts
 • Fontsquirrel, League of Movable Type,
   WebFonts.info wiki

• Proprietary fonts
 • Custom-designed typefaces for your client
• Commercial fonts
ACQUIRING FONTS

• Free fonts
 • Fontsquirrel, League of Movable Type,
   WebFonts.info wiki

• Proprietary fonts
 • Custom-designed typefaces for your client
• Commercial fonts
PROPRIETARY TYPEFACE


• Client owns the IP
• Client needs to know the risks
• Brief them on alternatives and
 considerations
COMMERCIAL TYPEFACE

• Read the EULA. Communicate about your
  protection techniques.

• If client already owns it, they likely don’t
  own a web/embedding license

• FaaS fonts are fair game. You’ll need to talk
  the foundry but it should be relatively easy.
COMMERCIAL TYPEFACE

• Read the EULA. Communicate about your
  protection techniques.

• If client already owns it, they likely don’t
  own a web/embedding license

• FaaS fonts are fair game. You’ll need to talk
  the foundry but it should be relatively easy.
COMMERCIAL TYPEFACE

• Read the EULA. Communicate about your
  protection techniques.

• If client already owns it, they likely don’t
  own a web/embedding license

• FaaS fonts are fair game. You’ll need to talk
  the foundry but it should be relatively easy.
FEATURE DETECTION

/*!   isFontFaceSupported()
 *    @font-face detection v1.0
 *    Paul Irish - 9/9/09
 *    MIT License
 */

var isFontFaceSupported = (function(){

  // allows overloading
  var fontret = new Boolean();

    // IE supports EOT and has had EOT support since IE 5.
    // This is a proprietary standard (ATOW) and thus this off-spec,
    // proprietary test for it is acceptable.
  if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;

  else {

      // Create variables for dedicated @font-face test
      var doc = document,
else {

    // Create variables for dedicated @font-face test
    var doc = document,
    FEATURE DETECTION
      st = doc.createElement('style'),
      spn = doc.createElement('span'),
      wid, nwid, isFakeBody = false, body = doc.body,
      callback, isCallbackCalled;

    // The following is a font-face + glyph definition for the .
character:
    st.textContent = "@font-face{font-family:testfont;src:url('data:font/
ttf;base64,................)}";
    doc.getElementsByTagName('head')[0].appendChild(st);



    spn.setAttribute('style','font:99px
_,serif;position:absolute;visibility:hidden');

   if (!body){
     body = docElement.appendChild(doc.createElement(fontface));
     isFakeBody = true;
   }

   // the data-uri'd font only has the . glyph; which is 3 pixels wide.
   spn.innerHTML = '........';
   spn.id        = 'fonttest';

   body.appendChild(spn);
   wid = spn.offsetWidth;
spn.innerHTML = '........';
     spn.id        = 'fonttest';

     body.appendChild(spn);
     FEATURE DETECTION
     wid = spn.offsetWidth;
     spn.style.font = '99px testfont,_,serif';

     // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
     fontret = wid !== spn.offsetWidth;

     var delayedCheck = function(){
       fontret = wid !== spn.offsetWidth;

      callback && (isCallbackCalled = true) && callback(fontret);
      isFakeBody && setTimeout(function()
{body.parentNode.removeChild(body)}, 50);
    }

     setTimeout(delayedCheck,100);
 }

 // allow for a callback
 fontret._onready = function(fn){
   (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
 }

  return function(){ return fontret || wid !== spn.offsetWidth; };
})();
@FONT-FACE SYNTAX
@FONT-FACE SYNTAX
@FONT-FACE SYNTAX
@FONT-FACE SYNTAX
PROTECTING THE FONT
        DATA
• Linking to the naked font is irresponsible and most
  likely, also i"egal
  • ..er, for commercial typefaces, that is.
• data: URI
  • ttf2eot
  • Sniff or IE gets double
  • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php

  • MHTML
PROTECTING THE FONT
 @font-face {
     font-family: "vera-sans-1";
        DATA
     src: url(data:font/otf;base64,AAEAAAASAQAABAAgRkZUTTjXPEcAA
 FoUAAAAHEdERUYAJwA6AABXgAAAAB5HUE9TIN8cOQAAV9AAAAJCR1NVQrj/uP4A
 AFegAAAAME9TLzK1ov3BAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEBqAA
• Linking to the naked font is irresponsible and most
 AAFZjbWFwczI52AAAAtAAAAFaY3Z0IBGE48kAAAokAAABxmZwZ23nl/HEAAAELD
 AAAAItnYXNwAAcABwAAV3QAAAAMZ2x5ZhcqOIkAAAxYAAAr0GhlYWT0aRi3AAAB
  likely, also i"egal
 LAAAADZoaGVhD0EGTgAAAWQAAAAkaG10eBfPCDUAAAIAAAAA0GxvY2EOCQRGAAA
 L7AAAAGptYXhwBGkF2QAAAYgAAAAgbmFtZYWMOCMAADgoAAAewHBvc3QGzAYwAA
  • ..er, for commercial typefaces, that is.
 BW6AAAAIpwcmVwfOmklgAABLgAAAVrAAEAAAABAADhSQxgXw889QAfCAAAAAAAx
 rHnsAAAAADGseew/qz+RgklBhQAAQAIAAIAAAAAAAAAAQAAB23+HQAACNP+rAAA
• data: URI
 P8pCSUAAQAAAAAAAAAAAAAAAAAAADQAAQAAADQALAADAAAAAAACABAAQAAHAAAE
 GgVrAAAAAAABBZgCvAAFAAAFRwTMAAD+QgVHBMwAAAJTAQICZggCAgsIAwMDBAs
  • ttf2eot
 CBIAAAK8QACB KAAAAAAAAAABCaXRzACAAQQB6BhT+FAGaB20B4wAAAAEAAAAAA
 AAC7ABEAAAAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEoC+v6sBjMAKwUZ
 ACsH9gArBrIAKwbNAEoF3QArBs0ASgYpACsFwwAfBXUAYgZ/AIsGMQCcCNMA2wY
  • Sniff or IE gets double
 r/5gFywCBBc3/ywVmACMFugA/BL4ATAW6AEoFbQBKA3sAZgW6ACkFsgA/Ar4APw
 K+/voFUgA/Ar4APwhWAD8FsgA/BX8ASgW6/+wFugBKA/IAPwTDABQD0wBYBbIAe
  • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php
 wU3AIEHZACyBSn/rAU3AAAEqP/uAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAA
 HAAEADgAAAAKAAgAAgACAEQARwBaAHr//wAAAEEARgBKAGH////C/8H/
  • MHTML
PROTECTING THE FONT
        DATA
• Linking to the naked font is irresponsible and most
  likely, also i"egal
  • ..er, for commercial typefaces, that is.
• data: URI
  • ttf2eot
  • Sniff or IE gets double
  • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php

  • MHTML
PROTECTING THE FONT
        DATA
• Linking to the naked font is irresponsible and most
  likely, also i"egal
  • ..er, for commercial typefaces, that is.
• data: URI
  • ttf2eot
  • Sniff or IE gets double
  • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php

  • MHTML
PROTECTING THE FONT
           DATA

•   Subset!
•   Segment!
•   Referrer control
•   Cross-Origin Access Control
PROTECTING THE FONT
        DATA
# disallow non-local referrers
SetEnvIfNoCase Referer "^http://w+.your-domain.com[/$]" locally_linked=1

# uncomment to allow blank referrers
# SetEnvIfNoCase Referer "^$" locally_linked=1

<FilesMatch ".(ttf|otf|eot|woff|font.css)$">
  Order Allow,Deny
  Allow from env=locally_linked

  # allow subdomain access
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "your-domain.com"
  </IfModule>
</FilesMatch>
RICH TYPE LIBRARIES
Employing Custom Fonts
SIFR

• Configuration
  • Custom js/css styling syntax

• Internal Technique
  1. Custom selector engine (or
     querySelectorAll)
  2. Reading style properties from sifr-config.js
  3. Placing Flash SWFs
SIFR

• Configuration
  • Custom js/css styling syntax

• Internal Technique
  1. Custom selector engine (or
     querySelectorAll)
  2. Reading style properties from sifr-config.js
  3. Placing Flash SWFs
SIFR

• Configuration
  • Custom js/css styling syntax

• Internal Technique
  1. Custom selector engine (or
     querySelectorAll)
  2. Reading style properties from sifr-config.js
  3. Placing Flash SWFs
http://bit.ly/facelift
http://bit.ly/facelift
http://bit.ly/facelift
FACELIFT

• Configuration
 • Styling type with CSS as normal


• Runtime Technique
 1.   Custom selector engine (or querySelectorAll)
 2.   Reading style properties through
      getComputedStyle()
 3.   Calling generate.php with text and style
http://bit.ly/typefacejs
TYPEFACE.JS

•    Configuration
    •    Styling type with CSS as normal


•    Runtime Technique:
    1.   Finds target elements by a 'typeface-js' class
    2.   Reading style properties through getComputedStyle()
    3.   Reads JSON representation of font and transforms
         into...
    4.   VML glyph rendering for IE, Canvas for the rest
http://bit.ly/cufon
CUFÓN

• Configuration
  • Styling type with CSS as normal


• Runtime Technique
  1. Any selector engine currently present is used
  2. Reading style properties through getComputedStyle()

  3.   Reads JSON representation of VML font and
       transforms into...
  4.   VML glyph rendering for IE, Canvas for the rest
CUFÓN

• Configuration
  • Styling type with CSS as normal


• Runtime Technique
  1. Any selector engine currently present is used
  2. Reading style properties through getComputedStyle()

  3.   Reads JSON representation of VML font and
       transforms into...
  4.   VML glyph rendering for IE, Canvas for the rest
CUFÓN

• Configuration
  • Styling type with CSS as normal


• Runtime Technique
  1. Any selector engine currently present is used
  2. Reading style properties through getComputedStyle()

  3.   Reads JSON representation of VML font and
       transforms into...
  4.   VML glyph rendering for IE, Canvas for the rest
sIFR                 Facelift           typeface.js                 Cufón

Technologies       Javascript, Flash      Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML
                                          ImageMagick


Selectable text?   Yes, but not the        Only in Firefox. No   Supported WITH         Not supported yet.
                   surrounding elements visual affordance.       visual affordance      Solutions for all
                   if the selection starts                                              browsers minus Opera
                   inside the SWF                                                       exist.

Hover state?       Supported              Supported              In progress            Supported


Printable?         Print.css lets you     <img> prints fine.      Supported.             Supported.
                   define a non-flash
                   fallback

Licensing issues   Some. SWF can be      None. Font file held     TBD. JS file can be      TBD. Cufon file can be
                   paired with a domain. on backend and not      reused with typeface.js paired with a domain.
                                         distributed             on any domain.

Minified javascript 28.8k                  18.4k                  11.7k                  14.2k
size


Fontin Sans (basic 12k swf                n/a                    30k js                 16k js
characters) size  
Technologies       Javascript, Flash      Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML
                                          ImageMagick


Selectable text?   Yes, but not the        Only in Firefox. No   Supported WITH         Not supported yet.
                   surrounding elements visual affordance.       visual affordance      Solutions for all
                   if the selection starts                                              browsers minus Opera
                   inside the SWF                                                       exist.

Hover state?       Supported              Supported              In progress            Supported


Printable?         Print.css lets you     <img> prints fine.      Supported.             Supported.
                   define a non-flash
                   fallback

Licensing issues   Some. SWF can be      None. Font file held     TBD. JS file can be      TBD. Cufon file can be
                   paired with a domain. on backend and not      reused with typeface.js paired with a domain.
                                         distributed             on any domain.

Minified javascript 28.8k                  18.4k                  11.7k                  14.2k
size


Fontin Sans (basic 12k swf                n/a                    30k js                 16k js
characters) size  


Gentium (full set) 232k swf               n/a                    1334k js               400k js
30,000 ms
            PERFORMANCE
            Milliseconds to replace 120 elements on a popular homepage
                        Empty cache. Average of five runs.

22,500 ms




15,000 ms




 7,500 ms




    0 ms
            sIFR             Facelift             Cufón             typeface.js

                      Firefox 3            IE 7            IE 6
CONCLUSIONS
•   sIFR
    •   Thx for the good times. xoxo.
•   Facelift
    •   Font file protected, safe with licensing rules
    •   Requires PHP and HTTP requests
•   Typeface.js
    •   Quality and performance inferior to Cufon
•   Cufón
    •   Full of win. (as long as licensing allows)
OPTIMAL
          IMPLEMENTATION
<!doctype html>
<head>

  <!-- Modernizr would be a fine solution here as well -->
  <script src="isFontFaceSupported.js"></script>

  <!-- css will include dataURI ttf/otf data and links to the .eot -->
  <link rel="stylesheet" type="style/css" href="gentium.font.css"/>

</head>
<body>

  <h1>My enthralling Content</h1>
  ...

  <script>
  isFontFaceSupported._onready(function(supported){
    !supported && getScript('cufon.and.font.js',function(){
       Cufon.now();
    })
OPTIMAL
<!doctype html>
<head>


          IMPLEMENTATION
  <!-- Modernizr would be a fine solution here as well -->
  <script src="isFontFaceSupported.js"></script>

  <!-- css will include dataURI ttf/otf data and links to the .eot -->
  <link rel="stylesheet" type="style/css" href="gentium.font.css"/>

</head>
<body>

  <h1>My enthralling Content</h1>
  ...

  <script>
  isFontFaceSupported._onready(function(supported){
    !supported && getScript('cufon.and.font.js',function(){
       Cufon.now();
    })
  });
  </script>

</body>
</html>
CONSIDERATIONS


• Performance
• Rendering quality
  • http://kltf.de/kltf_notes_raster.htm
  • http://opentype.info/demo/webfontdemo.html
  • http://nicewebtype.com/fonts/
NEXT?

• SVG Fonts integration for Chrome?
• Online font subsetting/segmenting tool
 • Different files for diff languages to minimize size

• Open source library for best implementation
• Watch the EOT-Lite/WOFF developments
EMPLOYING CUSTOM
          FONTS... NOW!
Muchas thankos!


More:
  http://paulirish.com/customfonts


Me:
http://paulirish.com
http://twitter.com/paul_irish

More Related Content

What's hot

WOFF and emerging technology of web fonts
WOFF and emerging technology of web fontsWOFF and emerging technology of web fonts
WOFF and emerging technology of web fontsVladimir Levantovsky
 
PHP Presentation
PHP PresentationPHP Presentation
PHP PresentationNikhil Jain
 
Drawing the Line with Browser Compatibility
Drawing the Line with Browser CompatibilityDrawing the Line with Browser Compatibility
Drawing the Line with Browser Compatibilityjsmith92
 
LESS is More
LESS is MoreLESS is More
LESS is Morejsmith92
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3Felipe Lavín
 
A rough guide to JavaScript Performance
A rough guide to JavaScript PerformanceA rough guide to JavaScript Performance
A rough guide to JavaScript Performanceallmarkedup
 
PHP Presentation
PHP PresentationPHP Presentation
PHP PresentationAnkush Jain
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sitesFelipe Lavín
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESSjsmith92
 
Navigating the Programmable Web
Navigating the Programmable WebNavigating the Programmable Web
Navigating the Programmable Webgoodfriday
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web PerformanceEric ShangKuan
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Html5 browser api_support
Html5 browser api_supportHtml5 browser api_support
Html5 browser api_support상길 안
 

What's hot (18)

Responsive Web Fonts
Responsive Web FontsResponsive Web Fonts
Responsive Web Fonts
 
WOFF and emerging technology of web fonts
WOFF and emerging technology of web fontsWOFF and emerging technology of web fonts
WOFF and emerging technology of web fonts
 
PHP Presentation
PHP PresentationPHP Presentation
PHP Presentation
 
Drawing the Line with Browser Compatibility
Drawing the Line with Browser CompatibilityDrawing the Line with Browser Compatibility
Drawing the Line with Browser Compatibility
 
LESS is More
LESS is MoreLESS is More
LESS is More
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
 
A rough guide to JavaScript Performance
A rough guide to JavaScript PerformanceA rough guide to JavaScript Performance
A rough guide to JavaScript Performance
 
PHP Presentation
PHP PresentationPHP Presentation
PHP Presentation
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
 
新 · 交互
新 · 交互新 · 交互
新 · 交互
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
AIGA EDGE
AIGA EDGEAIGA EDGE
AIGA EDGE
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESS
 
Navigating the Programmable Web
Navigating the Programmable WebNavigating the Programmable Web
Navigating the Programmable Web
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Html5 browser api_support
Html5 browser api_supportHtml5 browser api_support
Html5 browser api_support
 

Similar to Employing Custom Fonts

Web Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenWeb Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenMark Wubben
 
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
 
Web performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.ukWeb performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.ukgareth53
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?Greg Veen
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography TipsSara Cannon
 
To Hell with Web Safe Fonts
To Hell with Web Safe FontsTo Hell with Web Safe Fonts
To Hell with Web Safe FontsLennart Schoors
 
Gates Toorcon X New School Information Gathering
Gates Toorcon X New School Information GatheringGates Toorcon X New School Information Gathering
Gates Toorcon X New School Information GatheringChris Gates
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsYves Van Goethem
 
Grown-up javascript with AngularJS
Grown-up javascript with AngularJSGrown-up javascript with AngularJS
Grown-up javascript with AngularJSMykhailo Kotsur
 
symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)
symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)
symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)Fabien Potencier
 
Introducation to php for beginners
Introducation to php for beginners Introducation to php for beginners
Introducation to php for beginners musrath mohammad
 
Building a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profitBuilding a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profitBen Limmer
 

Similar to Employing Custom Fonts (20)

Web Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenWeb Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp Copenhagen
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
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
 
Web performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.ukWeb performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.uk
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
 
To Hell with Web Safe Fonts
To Hell with Web Safe FontsTo Hell with Web Safe Fonts
To Hell with Web Safe Fonts
 
Api Design
Api DesignApi Design
Api Design
 
Gates Toorcon X New School Information Gathering
Gates Toorcon X New School Information GatheringGates Toorcon X New School Information Gathering
Gates Toorcon X New School Information Gathering
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
Php with my sql
Php with my sqlPhp with my sql
Php with my sql
 
Transforming WebSockets
Transforming WebSocketsTransforming WebSockets
Transforming WebSockets
 
PHP for Grown-ups
PHP for Grown-upsPHP for Grown-ups
PHP for Grown-ups
 
Grown-up javascript with AngularJS
Grown-up javascript with AngularJSGrown-up javascript with AngularJS
Grown-up javascript with AngularJS
 
symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)
symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)
symfony: An Open-Source Framework for Professionals (Dutch Php Conference 2008)
 
Introducation to php for beginners
Introducation to php for beginners Introducation to php for beginners
Introducation to php for beginners
 
Building a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profitBuilding a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profit
 
Domain Specific Languages
Domain Specific LanguagesDomain Specific Languages
Domain Specific Languages
 

More from Paul Irish

An Overview of HTML5 Storage
An Overview of HTML5 StorageAn Overview of HTML5 Storage
An Overview of HTML5 StoragePaul Irish
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementPaul Irish
 
webfonts & @font-face :: in brief
webfonts & @font-face :: in briefwebfonts & @font-face :: in brief
webfonts & @font-face :: in briefPaul Irish
 
Progressive Advancement in Web8
Progressive Advancement in Web8Progressive Advancement in Web8
Progressive Advancement in Web8Paul Irish
 
Squeezing The Best Out Of Webfonts
Squeezing The Best Out Of WebfontsSqueezing The Best Out Of Webfonts
Squeezing The Best Out Of WebfontsPaul Irish
 
Modernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 supportModernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 supportPaul Irish
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionPaul Irish
 
Practical Design Solutions from Japan
Practical Design Solutions from JapanPractical Design Solutions from Japan
Practical Design Solutions from JapanPaul Irish
 

More from Paul Irish (8)

An Overview of HTML5 Storage
An Overview of HTML5 StorageAn Overview of HTML5 Storage
An Overview of HTML5 Storage
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancement
 
webfonts & @font-face :: in brief
webfonts & @font-face :: in briefwebfonts & @font-face :: in brief
webfonts & @font-face :: in brief
 
Progressive Advancement in Web8
Progressive Advancement in Web8Progressive Advancement in Web8
Progressive Advancement in Web8
 
Squeezing The Best Out Of Webfonts
Squeezing The Best Out Of WebfontsSqueezing The Best Out Of Webfonts
Squeezing The Best Out Of Webfonts
 
Modernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 supportModernizr - Detecting HTML5 and CSS3 support
Modernizr - Detecting HTML5 and CSS3 support
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 
Practical Design Solutions from Japan
Practical Design Solutions from JapanPractical Design Solutions from Japan
Practical Design Solutions from Japan
 

Recently uploaded

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 

Recently uploaded (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 

Employing Custom Fonts

  • 1. EMPLOYING CUSTOM FONTS... NOW!!! Paul Irish Molecular Inc. Emerging Interactions & Front-end Dev
  • 3. @FONT-FACE • .eot and .ttf/.otf embedding • Available in FF 3.5, Safari 3.2, Opera 10 .... and all IE for .eot
  • 4. @FONT-FACE • .eot and .ttf/.otf embedding • Available in FF 3.5, Safari 3.2, Opera 10 .... and all IE for .eot
  • 6. FONT FORMAT PROPOSALS • .webfont ➡ .webOTF ➡ WOFF • All (mostly) foundries ♥ it, nearly ideal solution • Mozilla is championing it • EOT-Lite • Proposed by Ascender • EOT minus the domain binding and MTX compression • Works in IE today
  • 8. THE LANDSCAPE • @font-face • Rich Type Libraries • sIFR, Facelift, typeface.js, Cufón • FaaS Shops • Typekit, Fontdeck, Typotheque, Kernest
  • 9. FONTS AS A SERVICE FaaS
  • 10. TYPOTHEQUE • Actual foundry, their fonts and others • CSS only • Files not cached at all • Relatively small typeface roster • Pricing model unknown
  • 11. KERNEST • CSS only • A mix of free and commercial fonts, 100 total • $0-15/font/year • No caching
  • 12. FONTDECK • Great team behind it from Clearleft, including Richard Rutter • No code yet • No news
  • 13. TYPEKIT • From Small Batch, Inc: Jeff Veen, etc • Include a javascript file. No fallback • They deal with licensing, you pay buffet style, 250+ fonts • All files hosted on CDN. • Cached for 5 minutes, with etags
  • 14. TYPEKIT • From Small Batch, Inc: Jeff Veen, etc • Include a javascript file. No fallback • They deal with licensing, you pay buffet style, 250+ fonts • All files hosted on CDN. • Cached for 5 minutes, with etags
  • 15. TYPEKIT • From Small Batch, Inc: Jeff Veen, etc • Include a javascript file. No fallback • They deal with licensing, you pay buffet style, 250+ fonts • All files hosted on CDN. • Cached for 5 minutes, with etags
  • 16. YO, I ROLL SOLO Making your own FaaS
  • 17. YOUR OWN FONT SERVICE 1.You get fonts 2.You verify the license permits your plans 3.You serve fonts to browsers that support @font- face 4.You protect the font data as much as possible 5.You provide a fallback for the rest of the browsers 6.You win life
  • 18. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  • 19. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  • 20. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  • 21. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  • 22. ACQUIRING FONTS • Free fonts • Fontsquirrel, League of Movable Type, WebFonts.info wiki • Proprietary fonts • Custom-designed typefaces for your client • Commercial fonts
  • 23. PROPRIETARY TYPEFACE • Client owns the IP • Client needs to know the risks • Brief them on alternatives and considerations
  • 24. COMMERCIAL TYPEFACE • Read the EULA. Communicate about your protection techniques. • If client already owns it, they likely don’t own a web/embedding license • FaaS fonts are fair game. You’ll need to talk the foundry but it should be relatively easy.
  • 25. COMMERCIAL TYPEFACE • Read the EULA. Communicate about your protection techniques. • If client already owns it, they likely don’t own a web/embedding license • FaaS fonts are fair game. You’ll need to talk the foundry but it should be relatively easy.
  • 26. COMMERCIAL TYPEFACE • Read the EULA. Communicate about your protection techniques. • If client already owns it, they likely don’t own a web/embedding license • FaaS fonts are fair game. You’ll need to talk the foundry but it should be relatively easy.
  • 27. FEATURE DETECTION /*! isFontFaceSupported() * @font-face detection v1.0 * Paul Irish - 9/9/09 * MIT License */ var isFontFaceSupported = (function(){ // allows overloading var fontret = new Boolean(); // IE supports EOT and has had EOT support since IE 5. // This is a proprietary standard (ATOW) and thus this off-spec, // proprietary test for it is acceptable. if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true; else { // Create variables for dedicated @font-face test var doc = document,
  • 28. else { // Create variables for dedicated @font-face test var doc = document, FEATURE DETECTION st = doc.createElement('style'), spn = doc.createElement('span'), wid, nwid, isFakeBody = false, body = doc.body, callback, isCallbackCalled; // The following is a font-face + glyph definition for the . character: st.textContent = "@font-face{font-family:testfont;src:url('data:font/ ttf;base64,................)}"; doc.getElementsByTagName('head')[0].appendChild(st); spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); if (!body){ body = docElement.appendChild(doc.createElement(fontface)); isFakeBody = true; } // the data-uri'd font only has the . glyph; which is 3 pixels wide. spn.innerHTML = '........'; spn.id = 'fonttest'; body.appendChild(spn); wid = spn.offsetWidth;
  • 29. spn.innerHTML = '........'; spn.id = 'fonttest'; body.appendChild(spn); FEATURE DETECTION wid = spn.offsetWidth; spn.style.font = '99px testfont,_,serif'; // needed for the CSSFontFaceRule false positives (ff3, chrome, op9) fontret = wid !== spn.offsetWidth; var delayedCheck = function(){ fontret = wid !== spn.offsetWidth; callback && (isCallbackCalled = true) && callback(fontret); isFakeBody && setTimeout(function() {body.parentNode.removeChild(body)}, 50); } setTimeout(delayedCheck,100); } // allow for a callback fontret._onready = function(fn){ (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn); } return function(){ return fontret || wid !== spn.offsetWidth; }; })();
  • 34. PROTECTING THE FONT DATA • Linking to the naked font is irresponsible and most likely, also i"egal • ..er, for commercial typefaces, that is. • data: URI • ttf2eot • Sniff or IE gets double • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php • MHTML
  • 35. PROTECTING THE FONT @font-face { font-family: "vera-sans-1"; DATA src: url(data:font/otf;base64,AAEAAAASAQAABAAgRkZUTTjXPEcAA FoUAAAAHEdERUYAJwA6AABXgAAAAB5HUE9TIN8cOQAAV9AAAAJCR1NVQrj/uP4A AFegAAAAME9TLzK1ov3BAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEBqAA • Linking to the naked font is irresponsible and most AAFZjbWFwczI52AAAAtAAAAFaY3Z0IBGE48kAAAokAAABxmZwZ23nl/HEAAAELD AAAAItnYXNwAAcABwAAV3QAAAAMZ2x5ZhcqOIkAAAxYAAAr0GhlYWT0aRi3AAAB likely, also i"egal LAAAADZoaGVhD0EGTgAAAWQAAAAkaG10eBfPCDUAAAIAAAAA0GxvY2EOCQRGAAA L7AAAAGptYXhwBGkF2QAAAYgAAAAgbmFtZYWMOCMAADgoAAAewHBvc3QGzAYwAA • ..er, for commercial typefaces, that is. BW6AAAAIpwcmVwfOmklgAABLgAAAVrAAEAAAABAADhSQxgXw889QAfCAAAAAAAx rHnsAAAAADGseew/qz+RgklBhQAAQAIAAIAAAAAAAAAAQAAB23+HQAACNP+rAAA • data: URI P8pCSUAAQAAAAAAAAAAAAAAAAAAADQAAQAAADQALAADAAAAAAACABAAQAAHAAAE GgVrAAAAAAABBZgCvAAFAAAFRwTMAAD+QgVHBMwAAAJTAQICZggCAgsIAwMDBAs • ttf2eot CBIAAAK8QACB KAAAAAAAAAABCaXRzACAAQQB6BhT+FAGaB20B4wAAAAEAAAAAA AAC7ABEAAAAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEoC+v6sBjMAKwUZ ACsH9gArBrIAKwbNAEoF3QArBs0ASgYpACsFwwAfBXUAYgZ/AIsGMQCcCNMA2wY • Sniff or IE gets double r/5gFywCBBc3/ywVmACMFugA/BL4ATAW6AEoFbQBKA3sAZgW6ACkFsgA/Ar4APw K+/voFUgA/Ar4APwhWAD8FsgA/BX8ASgW6/+wFugBKA/IAPwTDABQD0wBYBbIAe • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php wU3AIEHZACyBSn/rAU3AAAEqP/uAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAA HAAEADgAAAAKAAgAAgACAEQARwBaAHr//wAAAEEARgBKAGH////C/8H/ • MHTML
  • 36. PROTECTING THE FONT DATA • Linking to the naked font is irresponsible and most likely, also i"egal • ..er, for commercial typefaces, that is. • data: URI • ttf2eot • Sniff or IE gets double • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php • MHTML
  • 37. PROTECTING THE FONT DATA • Linking to the naked font is irresponsible and most likely, also i"egal • ..er, for commercial typefaces, that is. • data: URI • ttf2eot • Sniff or IE gets double • http://dancewithnet.com/lab/2009/data-uri-mhtml/create.php • MHTML
  • 38. PROTECTING THE FONT DATA • Subset! • Segment! • Referrer control • Cross-Origin Access Control
  • 39. PROTECTING THE FONT DATA # disallow non-local referrers SetEnvIfNoCase Referer "^http://w+.your-domain.com[/$]" locally_linked=1 # uncomment to allow blank referrers # SetEnvIfNoCase Referer "^$" locally_linked=1 <FilesMatch ".(ttf|otf|eot|woff|font.css)$"> Order Allow,Deny Allow from env=locally_linked # allow subdomain access <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "your-domain.com" </IfModule> </FilesMatch>
  • 42. SIFR • Configuration • Custom js/css styling syntax • Internal Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties from sifr-config.js 3. Placing Flash SWFs
  • 43. SIFR • Configuration • Custom js/css styling syntax • Internal Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties from sifr-config.js 3. Placing Flash SWFs
  • 44. SIFR • Configuration • Custom js/css styling syntax • Internal Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties from sifr-config.js 3. Placing Flash SWFs
  • 48. FACELIFT • Configuration • Styling type with CSS as normal • Runtime Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties through getComputedStyle() 3. Calling generate.php with text and style
  • 50. TYPEFACE.JS • Configuration • Styling type with CSS as normal • Runtime Technique: 1. Finds target elements by a 'typeface-js' class 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest
  • 52. CUFÓN • Configuration • Styling type with CSS as normal • Runtime Technique 1. Any selector engine currently present is used 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of VML font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest
  • 53. CUFÓN • Configuration • Styling type with CSS as normal • Runtime Technique 1. Any selector engine currently present is used 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of VML font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest
  • 54. CUFÓN • Configuration • Styling type with CSS as normal • Runtime Technique 1. Any selector engine currently present is used 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of VML font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest
  • 55. sIFR Facelift typeface.js Cufón Technologies Javascript, Flash Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML ImageMagick Selectable text? Yes, but not the Only in Firefox. No Supported WITH Not supported yet. surrounding elements visual affordance. visual affordance Solutions for all if the selection starts browsers minus Opera inside the SWF exist. Hover state? Supported Supported In progress Supported Printable? Print.css lets you <img> prints fine. Supported. Supported. define a non-flash fallback Licensing issues Some. SWF can be None. Font file held TBD. JS file can be TBD. Cufon file can be paired with a domain. on backend and not reused with typeface.js paired with a domain. distributed on any domain. Minified javascript 28.8k 18.4k 11.7k 14.2k size Fontin Sans (basic 12k swf n/a 30k js 16k js characters) size  
  • 56. Technologies Javascript, Flash Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML ImageMagick Selectable text? Yes, but not the Only in Firefox. No Supported WITH Not supported yet. surrounding elements visual affordance. visual affordance Solutions for all if the selection starts browsers minus Opera inside the SWF exist. Hover state? Supported Supported In progress Supported Printable? Print.css lets you <img> prints fine. Supported. Supported. define a non-flash fallback Licensing issues Some. SWF can be None. Font file held TBD. JS file can be TBD. Cufon file can be paired with a domain. on backend and not reused with typeface.js paired with a domain. distributed on any domain. Minified javascript 28.8k 18.4k 11.7k 14.2k size Fontin Sans (basic 12k swf n/a 30k js 16k js characters) size   Gentium (full set) 232k swf n/a 1334k js 400k js
  • 57. 30,000 ms PERFORMANCE Milliseconds to replace 120 elements on a popular homepage Empty cache. Average of five runs. 22,500 ms 15,000 ms 7,500 ms 0 ms sIFR Facelift Cufón typeface.js Firefox 3 IE 7 IE 6
  • 58. CONCLUSIONS • sIFR • Thx for the good times. xoxo. • Facelift • Font file protected, safe with licensing rules • Requires PHP and HTTP requests • Typeface.js • Quality and performance inferior to Cufon • Cufón • Full of win. (as long as licensing allows)
  • 59. OPTIMAL IMPLEMENTATION <!doctype html> <head> <!-- Modernizr would be a fine solution here as well --> <script src="isFontFaceSupported.js"></script> <!-- css will include dataURI ttf/otf data and links to the .eot --> <link rel="stylesheet" type="style/css" href="gentium.font.css"/> </head> <body> <h1>My enthralling Content</h1> ... <script> isFontFaceSupported._onready(function(supported){ !supported && getScript('cufon.and.font.js',function(){ Cufon.now(); })
  • 60. OPTIMAL <!doctype html> <head> IMPLEMENTATION <!-- Modernizr would be a fine solution here as well --> <script src="isFontFaceSupported.js"></script> <!-- css will include dataURI ttf/otf data and links to the .eot --> <link rel="stylesheet" type="style/css" href="gentium.font.css"/> </head> <body> <h1>My enthralling Content</h1> ... <script> isFontFaceSupported._onready(function(supported){ !supported && getScript('cufon.and.font.js',function(){ Cufon.now(); }) }); </script> </body> </html>
  • 61. CONSIDERATIONS • Performance • Rendering quality • http://kltf.de/kltf_notes_raster.htm • http://opentype.info/demo/webfontdemo.html • http://nicewebtype.com/fonts/
  • 62. NEXT? • SVG Fonts integration for Chrome? • Online font subsetting/segmenting tool • Different files for diff languages to minimize size • Open source library for best implementation • Watch the EOT-Lite/WOFF developments
  • 63. EMPLOYING CUSTOM FONTS... NOW! Muchas thankos! More: http://paulirish.com/customfonts Me: http://paulirish.com http://twitter.com/paul_irish

Editor's Notes

  1. naked is scarrrry
  2. test build of firefox with support for both not landed in trunk yet
  3. Agenda: - Library overviews, and helpful resources - Comparison table - Licensing - Performance - Conclusions
  4. 8 typefaces with variants
  5. considerations like.... umm sifr sucks &amp;#x201C;If you do it right, you should...&amp;#x201D; ?
  6. jquery sifr plugin makes this wayyyyyyyy better Doesn&amp;#x2019;t instantiate until visible in non-IE. Difficult configuration. Aided by jQuery siFR plugin and others Requires flash Not great with foreign/special characters Slow selector engine No superscript Non-html links (no open in new tab)
  7. jquery sifr plugin makes this wayyyyyyyy better Doesn&amp;#x2019;t instantiate until visible in non-IE. Difficult configuration. Aided by jQuery siFR plugin and others Requires flash Not great with foreign/special characters Slow selector engine No superscript Non-html links (no open in new tab)
  8. Great tutorials: * http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/ * http://www.divitodesign.com/2008/10/install-flir-typography-solution-for-the-web/
  9. Good response recently http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/ http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/ &amp;#xA0;
  10. Good response recently http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/ http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/ &amp;#xA0;
  11. Good response recently http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/ http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/ &amp;#xA0;
  12. fontfont eula.. the elephant in the room.
  13. looking for contributors
  14. Licensing can be from 150&amp;#x20AC; to $1500 for web embedding
  15. i still have a bit more coming.