SlideShare a Scribd company logo
1 of 103
Download to read offline
SQUEEZING THE BEST
                             OUT OF WEBFONTS




                                                         Paul Irish
                                                       Molecular Inc.
                               Emerging Interactions & Front-end Dev

Friday, February 19, 2010
WHAT’S THE PLAN, SAM

             javascript solutions
             @font-face overview
             webfont services
             doing @font-face the right way
             licensing

Friday, February 19, 2010
JAVASCRIPT-BASED
                    FONT SOLUTIONS



Friday, February 19, 2010
Friday, February 19, 2010
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




Friday, February 19, 2010
http://bit.ly/typefacejs
Friday, February 19, 2010
http://bit.ly/cufon
Friday, February 19, 2010
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




Friday, February 19, 2010
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




Friday, February 19, 2010
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




Friday, February 19, 2010
http://bit.ly/facelift
Friday, February 19, 2010
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



Friday, February 19, 2010
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



Friday, February 19, 2010
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



Friday, February 19, 2010
sIFR                  typeface.js                Cufón                  Facelift


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


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

    Hover state?            Supported               In progress               Supported                Supported


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



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

    Minified javascript      28.8k                   11.7k                     14.2k                    18.4k
    size


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


    Gentium (full set)      232k swf                1334k js                  400k js                  n/a


Friday, February 19, 2010
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

Friday, February 19, 2010
THE JS SOLUTION CONCLUSION

             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. (‘cept for selection)
             Cufón
                  Full of win.

Friday, February 19, 2010
@FONT-FACE




Friday, February 19, 2010
@FONT-FACE




Friday, February 19, 2010
@FONT-FACE




Friday, February 19, 2010
BROWSER SUPPORT

                            @font-face           svg fonts               rich type
                              (eot or ttf/otf)    (uses @font-face)       libraries
                                                                         (sIFR, Cufon, etc)


                    IE         IE 5+                                        IE 6+

               Firefox        FF 3.5               FF 3.5 +                 FF 2+
                              (.woff in 3.6)


                 Safari          3.1+                  3.1+                     3+
                                                 (incl. mobile safari)


              Chrome        Chrome 4.0 Chrome 0.3 +                             1+
                                 (stable)


                Opera        Opera 10             Opera 9                     9.2+
                                                                            (sometimes)




Friday, February 19, 2010
BROWSER SUPPORT

                            @font-face           svg fonts               rich type
                              (eot or ttf/otf)    (uses @font-face)       libraries
                                                                         (sIFR, Cufon, etc)


                    IE         IE 5+                                        IE 6+

               Firefox        FF 3.5               FF 3.5 +                 FF 2+
                              (.woff in 3.6)


                 Safari          3.1+                  3.1+                     3+
                                                 (incl. mobile safari)


              Chrome        Chrome 4.0 Chrome 0.3 +                             1+
                                 (stable)


                Opera        Opera 10             Opera 9                     9.2+
                                                                            (sometimes)




Friday, February 19, 2010
95% SUPPORT OF @FONT-FACE
                                                    IE 6.0
                                                     12%


                                                                             IE 8.0
                                                                              23%

                            IE 7.0
                             19%




                                                                                      Firefox 3.0
                                                                                          5%



                            Saf3, Opera, Chrome
                                    16%                        Firefox 3.5
                                                                   21%
                                                  Safari 4.0
                                                     4%



Friday, February 19, 2010
LICENSING




Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
FONT FORMAT PROPOSALS

             .webfont ➞ .webOTF ➞ WOFF
                  All foundries <3 it
                  Mozilla is championing it. It’s in 3.6


             EOT-Lite ➞ CWT
                  Proposed by Ascender
                  EOT minus the domain binding and MTX compression
                 Works in IE today


Friday, February 19, 2010
WEBFONT SERVICES




Friday, February 19, 2010
WEBFONT
                OBFUSCATION
                        SERVICES
                            ..also cdn optimization goodness..




Friday, February 19, 2010
TYPEKIT

             From Small Batch, Inc: Jeff Veen, etc

             Automating @font-face css declarations, ttf/eot, no
             fallback

             They deal with licensing, you pay buffet style, 250+ fonts

             All files hosted on CDN.

                  Cached for 5 minutes, with etags


Friday, February 19, 2010
TYPEKIT

             From Small Batch, Inc: Jeff Veen, etc

             Automating @font-face css declarations, ttf/eot, no
             fallback

             They deal with licensing, you pay buffet style, 250+ fonts

             All files hosted on CDN.

                  Cached for 5 minutes, with etags


Friday, February 19, 2010
TYPEKIT

             From Small Batch, Inc: Jeff Veen, etc

             Automating @font-face css declarations, ttf/eot, no
             fallback

             They deal with licensing, you pay buffet style, 250+ fonts

             All files hosted on CDN.

                  Cached for 5 minutes, with etags


Friday, February 19, 2010
TYPOTHEQUE


             Actual foundry, their fonts and others

             Files cached for 5 minutes

             Relatively small typeface roster

             Free - $, per font or for typeface family


Friday, February 19, 2010
TYPOTHEQUE


             Actual foundry, their fonts and others

             Files cached for 5 minutes

             Relatively small typeface roster

             Free - $, per font or for typeface family


Friday, February 19, 2010
KERNEST

             A mix of free and commercial fonts, 100+

             $0-15/font/year

             CSS only

             No caching


Friday, February 19, 2010
KERNEST

             A mix of free and commercial fonts, 100+

             $0-15/font/year

             CSS only

             No caching


Friday, February 19, 2010
FONTDECK



             Not launched yet

             Great team behind it from Clearleft,
             including Richard Rutter & Jon Tan



Friday, February 19, 2010
FONTDECK



             Not launched yet

             Great team behind it from Clearleft,
             including Richard Rutter & Jon Tan



Friday, February 19, 2010
YO, I ROLL SOLO
                                 Goin it alone




Friday, February 19, 2010
ROLL YOUR OWN


        1.You get fonts
        2.You verify the license permits your plans
        3.You serve fonts to browsers.
        4.You protect the font data as much as possible
        5.You win life

Friday, February 19, 2010
@FONT-FACE SYNTAX




Friday, February 19, 2010
@FONT-FACE SYNTAX




Friday, February 19, 2010
@FONT-FACE SYNTAX




Friday, February 19, 2010
FONT SQUIRREL GENERATOR




Friday, February 19, 2010
FONT SQUIRREL GENERATOR




Friday, February 19, 2010
ACQUIRING FONTS

             Free fonts

                 Fontsquirrel, League of Movable Type,
                 WebFonts.info wiki

             Proprietary fonts

                  Custom-designed typefaces for your client

             Commercial fonts

Friday, February 19, 2010
ACQUIRING FONTS

             Free fonts

                 Fontsquirrel, League of Movable Type,
                 WebFonts.info wiki

             Proprietary fonts

                  Custom-designed typefaces for your client

             Commercial fonts

Friday, February 19, 2010
ACQUIRING FONTS

             Free fonts

                 Fontsquirrel, League of Movable Type,
                 WebFonts.info wiki

             Proprietary fonts

                  Custom-designed typefaces for your client

             Commercial fonts

Friday, February 19, 2010
ACQUIRING FONTS

             Free fonts

                 Fontsquirrel, League of Movable Type,
                 WebFonts.info wiki

             Proprietary fonts

                  Custom-designed typefaces for your client

             Commercial fonts

Friday, February 19, 2010
PROPRIETARY TYPEFACE


             Client owns the IP

             Client needs to know the risks

             Brief them on alternatives and considerations

             If you do it right, you should


Friday, February 19, 2010
COMMERCIAL TYPEFACE


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

             Otherwise, read the EULA.

             Talk the foundry. Communicate about your
             protection techniques.



Friday, February 19, 2010
COMMERCIAL TYPEFACE


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

             Otherwise, read the EULA.

             Talk the foundry. Communicate about your
             protection techniques.



Friday, February 19, 2010
FONTSPRING




Friday, February 19, 2010
FONTSPRING




Friday, February 19, 2010
PICKING THE RIGHT FONT

             Step One: Test it.
             Step Two: Test it More


        Target Combos:
             FF/Win, IE6&7/Win, Saf on OSX

Friday, February 19, 2010
PICKING THE RIGHT FONT

             Step One: Test it.
             Step Two: Test it More


        Target Combos:
             FF/Win, IE6&7/Win, Saf on OSX

Friday, February 19, 2010
PICKING THE RIGHT FONT

             Step One: Test it.
             Step Two: Test it More


        Target Combos:
             FF/Win, IE6&7/Win, Saf on OSX

Friday, February 19, 2010
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,
                  st = doc.createElement('style'),
                  spn = doc.createElement('span'),
                  wid, nwid, isFakeBody = false, body = doc.body,
                  callback, isCallbackCalled;
Friday, February 19, 2010
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.style.font = '99px testfont,_,serif';

                // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
Friday, Februaryfontret = wid !== spn.offsetWidth;
                19, 2010
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; };
          })();




Friday, February 19, 2010
Modernizr
   Making use of tomorrow’s technologies, today!

Friday, February 19, 2010
HTML5 & CSS3 Coolness™




Friday, February 19, 2010
HTML5 & CSS3 Coolness™
             Rounded corners       2D Transformations
             @font-face fonts      CSS Gradients
             Canvas                SVG
             rgba() colors         Geolocation
             border-image          CSS Columns
             box-shadow            LocalStorage
             HTML5 Audio & Video   Web Workers
             CSS Animations        Offline Web Apps
             CSS Transitions       …and so on and so on.


Friday, February 19, 2010
Friday, February 19, 2010
Feature Detection
                            Just Detect It™




Friday, February 19, 2010
Friday, February 19, 2010
Native                         No Native
      Implementation                 Implementation
      h1 {
                                     .no-fontface h1 {
          // use cool custom font!
                                        // far less awesome font
          // it’ll rock!
                                     }
      }

                                     if (Modernizr.fontface == false){
                                          // Cufon fallback
                                     }


Friday, February 19, 2010
Friday, February 19, 2010
OM
                                 G it
                            onl       ’s
                                y7
                                   k!




Friday, February 19, 2010
BACK TO FONTS...




Friday, February 19, 2010
PROTECTING THE FONT


             Subset!
             data: URI
             Referrer control
             Cross-Origin Access Control


Friday, February 19, 2010
PROTECTING THE FONT


             Subset!
             data: URI
             Referrer control
             Cross-Origin Access Control


Friday, February 19, 2010
PROTECTING THE FONT


             Subset!
             data: URI
             Referrer control
             Cross-Origin Access Control


Friday, February 19, 2010
PROTECTING THE FONT
        @font-face {
            font-family: "vera-sans-1";
            src: url(data:font/otf;base64,AAEAAAASAQAABAAgRkZUTTjXPEcAA
        FoUAAAAHEdERUYAJwA6AABXgAAAAB5HUE9TIN8cOQAAV9AAAAJCR1NVQrj/uP4A
        AFegAAAAME9TLzK1ov3BAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEBqAAAA
        FZjbWFwczI52AAAAtAAAAFaY3Z0IBGE48kAAAokAAABxmZwZ23nl/HEAAAELD
        AAAAItnYXNwAAcABwAAV3QAAAAMZ2x5ZhcqOIkAAAxYAAAr0GhlYWT0aRi3AAABLA
             Subset!
        AAADZoaGVhD0EGTgAAAWQAAAAkaG10eBfPCDUAAAIAAAAA0GxvY2EOCQRGAAAL7AA
        AAGptYXhwBGkF2QAAAYgAAAAgbmFtZYWMOCMAADgoAAAewHBvc3QGzAYwAABW6AAA
        AIpwcmVwfOmklgAABLgAAAVrAAEAAAABAADhSQxgXw889QAfCAAAAAAAxrHnsAAAA
             data: URI
        ADGseew/qz+RgklBhQAAQAIAAIAAAAAAAAAAQAAB23+HQAACNP+rAAA
        P8pCSUAAQAAAAAAAAAAAAAAAAAAADQAAQAAADQALAADAAAAAAACABAAQAAHAAAEGg
        VrAAAAAAABBZgCvAAFAAAFRwTMAAD+QgVHBMwAAAJTAQICZggCAgsIAwMDBAs
             Referrer control
        CBIAAAK8QACB KAAAAAAAAAABCaXRzACAAQQB6BhT+FAGaB20B4wAAAAEAAAAAA
        AAC7ABEAAAAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEoC+v6sBjMAKwUZ
        ACsH9gArBrIAKwbNAEoF3QArBs0ASgYpACsFwwAfBXUAYgZ/AIsGMQCcCNMA2wY
             Cross-Origin Access Control
        r/5gFywCBBc3/ywVmACMFugA/BL4ATAW6AEoFbQBKA3sAZgW6ACkFsgA/Ar4APw K
        +/voFUgA/Ar4APwhWAD8FsgA/BX8ASgW6/+wFugBKA/IAPwTDABQD0wBYBbIAe
        wU3AIEHZACyBSn/rAU3AAAEqP/uAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAA
        HAAEADgAAAAKAAgAAgACAEQARwBaAHr//wAAAEEARgBKAGH////C/8H/



Friday, February 19, 2010
PROTECTING THE FONT


             Subset!
             data: URI
             Referrer control
             Cross-Origin Access Control


Friday, February 19, 2010
PROTECTING THE FONT

          # 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>




Friday, February 19, 2010
OPTIMIZATION

             Subset
             gzip
             EOTFast




Friday, February 19, 2010
OPTIMIZATION

             Subset
             gzip
             EOTFast




Friday, February 19, 2010
OPTIMIZATION

             Subset
             gzip
             EOTFast




Friday, February 19, 2010
RENDERING




Friday, February 19, 2010
CREDIT WHERE CREDIT IS DUE


             Opera: introduced the spec

             IE: @font-face since IE4, <ruby>, core
             web fonts
             Safari: Quartz rendering

             Firefox: font-size-adjust, text-rendering

Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
Friday, February 19, 2010
FOUT
        Your options:
             Deal.
             gzip
             Subset
             data-uri
             font-size-adjust
             Hide everything!
Friday, February 19, 2010
FOUT
        Your options:
             Deal.
             The            x-height The x-height
             gzip
             Subset
             data-uri
             font-size-adjust
             Hide everything!
Friday, February 19, 2010
FOUT
        Your options:
             Deal.
             The            x-height The x-height
             gzip
             Subset
            .title {
               font-size: 12px;
             data-uri
               font-size-adjust: 0.6; /* x-height: 7.2px */
            }font-size-adjust
             Hide everything!
Friday, February 19, 2010
FOUT
        Your options:
             Deal.
             gzip
             Subset
             data-uri
             font-size-adjust
             Hide everything!
Friday, February 19, 2010
FOUT
        Your options:
             Deal.
             gzip
             Subset
             data-uri
             font-size-adjust
             Hide everything!
Friday, February 19, 2010
RENDERING QUALITY




Friday, February 19, 2010
TRICKS

             disable cleartype
             text-rendering
             text-shadow



Friday, February 19, 2010
TRICKS

             disable cleartype
             text-rendering
         h2, p {
         font: 36px/44px 'OldSansBlack', sans-serif; letter-spacing: 0;

             text-shadow
         filter:
         progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.p
         ng,sizingMethod=crop);
         zoom:1;
         }




Friday, February 19, 2010
TRICKS

             disable cleartype
             text-rendering
             text-shadow



Friday, February 19, 2010
TRICKS

             disable cleartype
             text-rendering
             text-shadow



Friday, February 19, 2010
GO FORTH AND MAKE
              IT LOOK GOOD.
                            Don’t go crazy on it, though.




Friday, February 19, 2010
GO FORTH AND MAKE
              IT LOOK GOOD.
                            Don’t go crazy on it, though.




Friday, February 19, 2010
Squeeeezing the best out of webfonts



         Muchas thankos!

         More:
         http:/
              /paulirish.com/squeeze

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


Friday, February 19, 2010

More Related Content

Viewers also liked

AtjConsultores_WorksSheet
AtjConsultores_WorksSheetAtjConsultores_WorksSheet
AtjConsultores_WorksSheetatj_
 
Neue Microsoft Portale für Dynamics CRM
Neue Microsoft Portale für Dynamics CRMNeue Microsoft Portale für Dynamics CRM
Neue Microsoft Portale für Dynamics CRMIOZ AG
 
Relations professionnelles
Relations professionnellesRelations professionnelles
Relations professionnellesartxtra
 
Cómo los beacons y las tecnologías de proximidad ayudan a la industria minorista
Cómo los beacons y las tecnologías de proximidad ayudan a la industria minoristaCómo los beacons y las tecnologías de proximidad ayudan a la industria minorista
Cómo los beacons y las tecnologías de proximidad ayudan a la industria minoristaOpenbravo
 
Civilización Azteca
Civilización AztecaCivilización Azteca
Civilización Aztecali.touma
 
Il campo magnetico
Il campo magneticoIl campo magnetico
Il campo magneticoalbpo
 
Sintesis 8JUN14, casa Patricia.docx
Sintesis 8JUN14, casa Patricia.docxSintesis 8JUN14, casa Patricia.docx
Sintesis 8JUN14, casa Patricia.docxSylvia Hidalgo
 
Diari del 27 de març de 2014
Diari del 27 de març de 2014Diari del 27 de març de 2014
Diari del 27 de març de 2014diarimes
 
Football Transfer Review 2010 Ediçao Brasil- English version
Football  Transfer Review 2010 Ediçao Brasil- English versionFootball  Transfer Review 2010 Ediçao Brasil- English version
Football Transfer Review 2010 Ediçao Brasil- English versionPrime Time Sport
 
Snapmail: The private cloud gateway for email sharing
Snapmail: The private cloud gateway for email sharingSnapmail: The private cloud gateway for email sharing
Snapmail: The private cloud gateway for email sharingAmina WADDIZ
 
Workflow Management mit SharePoint und Nintex (Vorgehen)
Workflow Management mit SharePoint und Nintex (Vorgehen)Workflow Management mit SharePoint und Nintex (Vorgehen)
Workflow Management mit SharePoint und Nintex (Vorgehen)IOZ AG
 

Viewers also liked (18)

Ponencia MCH
Ponencia MCHPonencia MCH
Ponencia MCH
 
AtjConsultores_WorksSheet
AtjConsultores_WorksSheetAtjConsultores_WorksSheet
AtjConsultores_WorksSheet
 
Neue Microsoft Portale für Dynamics CRM
Neue Microsoft Portale für Dynamics CRMNeue Microsoft Portale für Dynamics CRM
Neue Microsoft Portale für Dynamics CRM
 
TiLiOS Bourges
TiLiOS BourgesTiLiOS Bourges
TiLiOS Bourges
 
Media ReleaseUS$
Media ReleaseUS$Media ReleaseUS$
Media ReleaseUS$
 
Relations professionnelles
Relations professionnellesRelations professionnelles
Relations professionnelles
 
Cómo los beacons y las tecnologías de proximidad ayudan a la industria minorista
Cómo los beacons y las tecnologías de proximidad ayudan a la industria minoristaCómo los beacons y las tecnologías de proximidad ayudan a la industria minorista
Cómo los beacons y las tecnologías de proximidad ayudan a la industria minorista
 
Civilización Azteca
Civilización AztecaCivilización Azteca
Civilización Azteca
 
Sesión N°2 Lógica PPS Unimet
Sesión N°2 Lógica PPS UnimetSesión N°2 Lógica PPS Unimet
Sesión N°2 Lógica PPS Unimet
 
Il campo magnetico
Il campo magneticoIl campo magnetico
Il campo magnetico
 
Sintesis 8JUN14, casa Patricia.docx
Sintesis 8JUN14, casa Patricia.docxSintesis 8JUN14, casa Patricia.docx
Sintesis 8JUN14, casa Patricia.docx
 
Dinâmica climática
Dinâmica climáticaDinâmica climática
Dinâmica climática
 
Diari del 27 de març de 2014
Diari del 27 de març de 2014Diari del 27 de març de 2014
Diari del 27 de març de 2014
 
Football Transfer Review 2010 Ediçao Brasil- English version
Football  Transfer Review 2010 Ediçao Brasil- English versionFootball  Transfer Review 2010 Ediçao Brasil- English version
Football Transfer Review 2010 Ediçao Brasil- English version
 
Social Business y Enterprise 2.0 (feb 2011)
Social Business y Enterprise 2.0 (feb 2011)Social Business y Enterprise 2.0 (feb 2011)
Social Business y Enterprise 2.0 (feb 2011)
 
Snapmail: The private cloud gateway for email sharing
Snapmail: The private cloud gateway for email sharingSnapmail: The private cloud gateway for email sharing
Snapmail: The private cloud gateway for email sharing
 
Kujenga de vries (adlsn)
Kujenga de vries (adlsn)Kujenga de vries (adlsn)
Kujenga de vries (adlsn)
 
Workflow Management mit SharePoint und Nintex (Vorgehen)
Workflow Management mit SharePoint und Nintex (Vorgehen)Workflow Management mit SharePoint und Nintex (Vorgehen)
Workflow Management mit SharePoint und Nintex (Vorgehen)
 

Similar to Squeezing The Best Out Of Webfonts

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
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsYves Van Goethem
 
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
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web PerformanceEric ShangKuan
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performanceGeorge Ang
 
Window Shopping Browser - Bug Hunting in 2012
Window Shopping Browser - Bug Hunting in 2012Window Shopping Browser - Bug Hunting in 2012
Window Shopping Browser - Bug Hunting in 2012Roberto Suggi Liverani
 
Playframework + Twitter Bootstrap
Playframework + Twitter BootstrapPlayframework + Twitter Bootstrap
Playframework + Twitter BootstrapKevingo Tsai
 
Web Browser Demystified
Web Browser DemystifiedWeb Browser Demystified
Web Browser DemystifiedRohit Joshi
 
Internals - Exploring the webOS Browser and JavaScript
Internals - Exploring the webOS Browser and JavaScriptInternals - Exploring the webOS Browser and JavaScript
Internals - Exploring the webOS Browser and JavaScriptfpatton
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browserSabin Buraga
 
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗Bobby Chen
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2elliotjaystocks
 
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser WorkshopTaro Matsuzawa
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish360|Conferences
 
Web Typography with CSS3
Web Typography with CSS3Web Typography with CSS3
Web Typography with CSS3Matthew Smith
 

Similar to Squeezing The Best Out Of Webfonts (20)

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 2009
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
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
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web Type
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performance
 
Window Shopping Browser - Bug Hunting in 2012
Window Shopping Browser - Bug Hunting in 2012Window Shopping Browser - Bug Hunting in 2012
Window Shopping Browser - Bug Hunting in 2012
 
Playframework + Twitter Bootstrap
Playframework + Twitter BootstrapPlayframework + Twitter Bootstrap
Playframework + Twitter Bootstrap
 
Web fonts
Web fontsWeb fonts
Web fonts
 
Web Browser Demystified
Web Browser DemystifiedWeb Browser Demystified
Web Browser Demystified
 
Internals - Exploring the webOS Browser and JavaScript
Internals - Exploring the webOS Browser and JavaScriptInternals - Exploring the webOS Browser and JavaScript
Internals - Exploring the webOS Browser and JavaScript
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser
 
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗
 
Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2Progressive Enhancement & Intentional Degradation 2
Progressive Enhancement & Intentional Degradation 2
 
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
(元)コミュニティメンバーから見たMozilla / Firefoxの歴史と展望@Browser Workshop
 
Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish
 
Mobile Widgets Development
Mobile Widgets DevelopmentMobile Widgets Development
Mobile Widgets Development
 
Web Typography with CSS3
Web Typography with CSS3Web Typography with CSS3
Web Typography with CSS3
 

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
 
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 (7)

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
 
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

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Recently uploaded (19)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

Squeezing The Best Out Of Webfonts

  • 1. SQUEEZING THE BEST OUT OF WEBFONTS Paul Irish Molecular Inc. Emerging Interactions & Front-end Dev Friday, February 19, 2010
  • 2. WHAT’S THE PLAN, SAM javascript solutions @font-face overview webfont services doing @font-face the right way licensing Friday, February 19, 2010
  • 3. JAVASCRIPT-BASED FONT SOLUTIONS Friday, February 19, 2010
  • 5. 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 Friday, February 19, 2010
  • 8. 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 Friday, February 19, 2010
  • 9. 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 Friday, February 19, 2010
  • 10. 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 Friday, February 19, 2010
  • 12. 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 Friday, February 19, 2010
  • 13. 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 Friday, February 19, 2010
  • 14. 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 Friday, February 19, 2010
  • 15. sIFR typeface.js Cufón Facelift Technologies Javascript, Flash Javascript, Canvas, VML Javascript, Canvas,VML Javascript, PHP, GD or ImageMagick Selectable text? Yes, but not the Supported WITH visual Not supported yet. Only in Firefox. No surrounding elements if affordance Solutions for all visual affordance. the selection starts browsers minus Opera inside the SWF exist. Hover state? Supported In progress Supported Supported Printable? Print.css lets you define Supported. Supported. <img> prints fine. a non-flash fallback Licensing issues Some. SWF can be TBD. JS file can be TBD. Cufon file can be None. Font file held on paired with a domain. reused with typeface.js paired with a domain. backend and not on any domain. distributed Minified javascript 28.8k 11.7k 14.2k 18.4k size Fontin Sans (basic 12k swf 30k js 16k js n/a characters) size   Gentium (full set) 232k swf 1334k js 400k js n/a Friday, February 19, 2010
  • 16. 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 Friday, February 19, 2010
  • 17. THE JS SOLUTION CONCLUSION 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. (‘cept for selection) Cufón Full of win. Friday, February 19, 2010
  • 21. BROWSER SUPPORT @font-face svg fonts rich type (eot or ttf/otf) (uses @font-face) libraries (sIFR, Cufon, etc) IE IE 5+ IE 6+ Firefox FF 3.5 FF 3.5 + FF 2+ (.woff in 3.6) Safari 3.1+ 3.1+ 3+ (incl. mobile safari) Chrome Chrome 4.0 Chrome 0.3 + 1+ (stable) Opera Opera 10 Opera 9 9.2+ (sometimes) Friday, February 19, 2010
  • 22. BROWSER SUPPORT @font-face svg fonts rich type (eot or ttf/otf) (uses @font-face) libraries (sIFR, Cufon, etc) IE IE 5+ IE 6+ Firefox FF 3.5 FF 3.5 + FF 2+ (.woff in 3.6) Safari 3.1+ 3.1+ 3+ (incl. mobile safari) Chrome Chrome 4.0 Chrome 0.3 + 1+ (stable) Opera Opera 10 Opera 9 9.2+ (sometimes) Friday, February 19, 2010
  • 23. 95% SUPPORT OF @FONT-FACE IE 6.0 12% IE 8.0 23% IE 7.0 19% Firefox 3.0 5% Saf3, Opera, Chrome 16% Firefox 3.5 21% Safari 4.0 4% Friday, February 19, 2010
  • 31. FONT FORMAT PROPOSALS .webfont ➞ .webOTF ➞ WOFF All foundries <3 it Mozilla is championing it. It’s in 3.6 EOT-Lite ➞ CWT Proposed by Ascender EOT minus the domain binding and MTX compression Works in IE today Friday, February 19, 2010
  • 33. WEBFONT OBFUSCATION SERVICES ..also cdn optimization goodness.. Friday, February 19, 2010
  • 34. TYPEKIT From Small Batch, Inc: Jeff Veen, etc Automating @font-face css declarations, ttf/eot, no fallback They deal with licensing, you pay buffet style, 250+ fonts All files hosted on CDN. Cached for 5 minutes, with etags Friday, February 19, 2010
  • 35. TYPEKIT From Small Batch, Inc: Jeff Veen, etc Automating @font-face css declarations, ttf/eot, no fallback They deal with licensing, you pay buffet style, 250+ fonts All files hosted on CDN. Cached for 5 minutes, with etags Friday, February 19, 2010
  • 36. TYPEKIT From Small Batch, Inc: Jeff Veen, etc Automating @font-face css declarations, ttf/eot, no fallback They deal with licensing, you pay buffet style, 250+ fonts All files hosted on CDN. Cached for 5 minutes, with etags Friday, February 19, 2010
  • 37. TYPOTHEQUE Actual foundry, their fonts and others Files cached for 5 minutes Relatively small typeface roster Free - $, per font or for typeface family Friday, February 19, 2010
  • 38. TYPOTHEQUE Actual foundry, their fonts and others Files cached for 5 minutes Relatively small typeface roster Free - $, per font or for typeface family Friday, February 19, 2010
  • 39. KERNEST A mix of free and commercial fonts, 100+ $0-15/font/year CSS only No caching Friday, February 19, 2010
  • 40. KERNEST A mix of free and commercial fonts, 100+ $0-15/font/year CSS only No caching Friday, February 19, 2010
  • 41. FONTDECK Not launched yet Great team behind it from Clearleft, including Richard Rutter & Jon Tan Friday, February 19, 2010
  • 42. FONTDECK Not launched yet Great team behind it from Clearleft, including Richard Rutter & Jon Tan Friday, February 19, 2010
  • 43. YO, I ROLL SOLO Goin it alone Friday, February 19, 2010
  • 44. ROLL YOUR OWN 1.You get fonts 2.You verify the license permits your plans 3.You serve fonts to browsers. 4.You protect the font data as much as possible 5.You win life Friday, February 19, 2010
  • 48. FONT SQUIRREL GENERATOR Friday, February 19, 2010
  • 49. FONT SQUIRREL GENERATOR Friday, February 19, 2010
  • 50. ACQUIRING FONTS Free fonts Fontsquirrel, League of Movable Type, WebFonts.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
  • 51. ACQUIRING FONTS Free fonts Fontsquirrel, League of Movable Type, WebFonts.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
  • 52. ACQUIRING FONTS Free fonts Fontsquirrel, League of Movable Type, WebFonts.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
  • 53. ACQUIRING FONTS Free fonts Fontsquirrel, League of Movable Type, WebFonts.info wiki Proprietary fonts Custom-designed typefaces for your client Commercial fonts Friday, February 19, 2010
  • 54. PROPRIETARY TYPEFACE Client owns the IP Client needs to know the risks Brief them on alternatives and considerations If you do it right, you should Friday, February 19, 2010
  • 55. COMMERCIAL TYPEFACE If client already owns it, they likely don’t own a web/embedding license Otherwise, read the EULA. Talk the foundry. Communicate about your protection techniques. Friday, February 19, 2010
  • 56. COMMERCIAL TYPEFACE If client already owns it, they likely don’t own a web/embedding license Otherwise, read the EULA. Talk the foundry. Communicate about your protection techniques. Friday, February 19, 2010
  • 59. PICKING THE RIGHT FONT Step One: Test it. Step Two: Test it More Target Combos: FF/Win, IE6&7/Win, Saf on OSX Friday, February 19, 2010
  • 60. PICKING THE RIGHT FONT Step One: Test it. Step Two: Test it More Target Combos: FF/Win, IE6&7/Win, Saf on OSX Friday, February 19, 2010
  • 61. PICKING THE RIGHT FONT Step One: Test it. Step Two: Test it More Target Combos: FF/Win, IE6&7/Win, Saf on OSX Friday, February 19, 2010
  • 62. 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, st = doc.createElement('style'), spn = doc.createElement('span'), wid, nwid, isFakeBody = false, body = doc.body, callback, isCallbackCalled; Friday, February 19, 2010
  • 63. 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.style.font = '99px testfont,_,serif'; // needed for the CSSFontFaceRule false positives (ff3, chrome, op9) Friday, Februaryfontret = wid !== spn.offsetWidth; 19, 2010
  • 64. 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; }; })(); Friday, February 19, 2010
  • 65. Modernizr Making use of tomorrow’s technologies, today! Friday, February 19, 2010
  • 66. HTML5 & CSS3 Coolness™ Friday, February 19, 2010
  • 67. HTML5 & CSS3 Coolness™ Rounded corners 2D Transformations @font-face fonts CSS Gradients Canvas SVG rgba() colors Geolocation border-image CSS Columns box-shadow LocalStorage HTML5 Audio & Video Web Workers CSS Animations Offline Web Apps CSS Transitions …and so on and so on. Friday, February 19, 2010
  • 69. Feature Detection Just Detect It™ Friday, February 19, 2010
  • 71. Native No Native Implementation Implementation h1 { .no-fontface h1 { // use cool custom font! // far less awesome font // it’ll rock! } } if (Modernizr.fontface == false){ // Cufon fallback } Friday, February 19, 2010
  • 73. OM G it onl ’s y7 k! Friday, February 19, 2010
  • 74. BACK TO FONTS... Friday, February 19, 2010
  • 75. PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
  • 76. PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
  • 77. PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
  • 78. PROTECTING THE FONT @font-face { font-family: "vera-sans-1"; src: url(data:font/otf;base64,AAEAAAASAQAABAAgRkZUTTjXPEcAA FoUAAAAHEdERUYAJwA6AABXgAAAAB5HUE9TIN8cOQAAV9AAAAJCR1NVQrj/uP4A AFegAAAAME9TLzK1ov3BAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEBqAAAA FZjbWFwczI52AAAAtAAAAFaY3Z0IBGE48kAAAokAAABxmZwZ23nl/HEAAAELD AAAAItnYXNwAAcABwAAV3QAAAAMZ2x5ZhcqOIkAAAxYAAAr0GhlYWT0aRi3AAABLA Subset! AAADZoaGVhD0EGTgAAAWQAAAAkaG10eBfPCDUAAAIAAAAA0GxvY2EOCQRGAAAL7AA AAGptYXhwBGkF2QAAAYgAAAAgbmFtZYWMOCMAADgoAAAewHBvc3QGzAYwAABW6AAA AIpwcmVwfOmklgAABLgAAAVrAAEAAAABAADhSQxgXw889QAfCAAAAAAAxrHnsAAAA data: URI ADGseew/qz+RgklBhQAAQAIAAIAAAAAAAAAAQAAB23+HQAACNP+rAAA P8pCSUAAQAAAAAAAAAAAAAAAAAAADQAAQAAADQALAADAAAAAAACABAAQAAHAAAEGg VrAAAAAAABBZgCvAAFAAAFRwTMAAD+QgVHBMwAAAJTAQICZggCAgsIAwMDBAs Referrer control CBIAAAK8QACB KAAAAAAAAAABCaXRzACAAQQB6BhT+FAGaB20B4wAAAAEAAAAAA AAC7ABEAAAAAAKqAAAGMf97BhkAKwXfAEoGpAArBXcAKwaRAEoC+v6sBjMAKwUZ ACsH9gArBrIAKwbNAEoF3QArBs0ASgYpACsFwwAfBXUAYgZ/AIsGMQCcCNMA2wY Cross-Origin Access Control r/5gFywCBBc3/ywVmACMFugA/BL4ATAW6AEoFbQBKA3sAZgW6ACkFsgA/Ar4APw K +/voFUgA/Ar4APwhWAD8FsgA/BX8ASgW6/+wFugBKA/IAPwTDABQD0wBYBbIAe wU3AIEHZACyBSn/rAU3AAAEqP/uAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAA HAAEADgAAAAKAAgAAgACAEQARwBaAHr//wAAAEEARgBKAGH////C/8H/ Friday, February 19, 2010
  • 79. PROTECTING THE FONT Subset! data: URI Referrer control Cross-Origin Access Control Friday, February 19, 2010
  • 80. PROTECTING THE FONT # 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> Friday, February 19, 2010
  • 81. OPTIMIZATION Subset gzip EOTFast Friday, February 19, 2010
  • 82. OPTIMIZATION Subset gzip EOTFast Friday, February 19, 2010
  • 83. OPTIMIZATION Subset gzip EOTFast Friday, February 19, 2010
  • 85. CREDIT WHERE CREDIT IS DUE Opera: introduced the spec IE: @font-face since IE4, <ruby>, core web fonts Safari: Quartz rendering Firefox: font-size-adjust, text-rendering Friday, February 19, 2010
  • 91. FOUT Your options: Deal. gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
  • 92. FOUT Your options: Deal. The x-height The x-height gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
  • 93. FOUT Your options: Deal. The x-height The x-height gzip Subset .title { font-size: 12px; data-uri font-size-adjust: 0.6; /* x-height: 7.2px */ }font-size-adjust Hide everything! Friday, February 19, 2010
  • 94. FOUT Your options: Deal. gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
  • 95. FOUT Your options: Deal. gzip Subset data-uri font-size-adjust Hide everything! Friday, February 19, 2010
  • 97. TRICKS disable cleartype text-rendering text-shadow Friday, February 19, 2010
  • 98. TRICKS disable cleartype text-rendering h2, p { font: 36px/44px 'OldSansBlack', sans-serif; letter-spacing: 0; text-shadow filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.p ng,sizingMethod=crop); zoom:1; } Friday, February 19, 2010
  • 99. TRICKS disable cleartype text-rendering text-shadow Friday, February 19, 2010
  • 100. TRICKS disable cleartype text-rendering text-shadow Friday, February 19, 2010
  • 101. GO FORTH AND MAKE IT LOOK GOOD. Don’t go crazy on it, though. Friday, February 19, 2010
  • 102. GO FORTH AND MAKE IT LOOK GOOD. Don’t go crazy on it, though. Friday, February 19, 2010
  • 103. Squeeeezing the best out of webfonts Muchas thankos! More: http:/ /paulirish.com/squeeze Me: http://paulirish.com http://twitter.com/paul_irish Friday, February 19, 2010