Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Faster, and (Coincidentally) More Secure Webfonts

10,438 views

Published on

TypeKit, FontSquirrel and Kernest are all great solutions to have webfonts in your sites, but wouldn’t you like to know what these services actually do in the underbellies, for once? And do you know that making fonts load faster often means also making it more secure?

Kill two glyphs with one stone by subseting, embedding and randomizing your own webfonts. See actual performance benchmarks (for once), and learn some hacks that would drive every would be type-pirate crazy (really).

Published in: Design, Technology, Art & Photos

Faster, and (Coincidentally) More Secure Webfonts

  1. FASTER, & ()   WEBFONTS bram@brampitoyo.com
  2. 3
  3.  
  4.   1. Subset
  5.   1. Subset, which can mean 2 things
  6.   1. Using a subset vs. using a font’s full character set
  7.   1. Subseting, which means splitting 1 font file into multiple parts
  8.   1. Subset 2. Embed
  9.   1. Subset 2. Embed vs. linking directly to a font file
  10.   1. Subset 2. Embed 3. Randomize
  11.   1. Subset 2. Embed 3. Randomize, a new way to secure
  12.   1. Subset 2. Embed Make webfonts both faster & more secure
  13.   3. Randomize Taking a step further
  14.  ’      formats
  15.  ’      formats, although, let’s talk about it over beer aerwards.
  16.   Fonts should be naked, or come with minimal obscuring
  17.   Fonts should be naked, or come with minimal obscuring, because it creates the best user & developer experience.
  18.   Fonts should be naked, or come with minimal obscuring, because it creates the best user & developer experience.
  19.   Fonts should be naked, or come with minimal obscuring, because it creates the fastest experience.
  20.   Fonts should be naked, or come with minimal obscuring, because it creates the most compatible experience
  21.   Fonts should be naked, or come with minimal obscuring, because it creates the most @font-face browsers
  22.   Fonts should be naked, or come with minimal obscuring, because it creates the least complex experience.
  23.   Fonts should be naked, or come with minimal obscuring, because it creates the less bugs for you and me
  24.   1. Using a subset vs. using a font’s full character set
  25. +- Basic Latin !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
  26. +- Latin-1 Supplement !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ
  27. +-, - Punc., Currency, Number Forms !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ ‐‑‒–—―‖‗‘’‚‛“”„‟†‡•‣․‥…‧ ‰‱′″‴‵‶‷‸‹›※‼‽‾‿⁀⁁⁂⁃⁄⁅⁆⁇⁈⁉⁊⁋⁌⁍⁎⁏⁐⁑⁒⁓⁔ ⁕⁖⁗⁘⁙ ⁛⁜ Ầ⁰ⁱ⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ₀₁₂₃₄₅₅₆₇₈₉₊₋₌₍₎₠₡₢₣₤₥₦₧₨₩₪₫€₭₮₯₰₱‘ ’“” ⅓⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞⅟
  28.  http://zenoplex.jp/tools/ unicoderange_generator.html
  29. — ,
  30.  -
  31. @- { font-family: Gentium; src: url(Gentium.ttf ); }
  32. @- { font-family: Gentium; src: url(Gentium.ttf ); unicode-range:+- }
  33.  Most of our documents are designed to be typeset in 1 language.
  34.  Most of our documents are designed to be typeset in 1 language (it’s faster to load what you use.)
  35.  
  36.  Full: Basic Latin, Latin-1, Latin Extended-A, Greek, Cyrillic, Punctuation, Super & Sub, Currency, Number Forms
  37.  Full: 112 
  38.  Full: 112  Latin-1: 44 
  39.  Full: 112  Latin-1: 44  Basic Latin: 28 
  40.  Full: 112  Latin-1: 44  Basic Latin: 28  Optimized Basic Latin, Fractions, Punctuation, Currency, Math
  41.  Full: 112  Latin-1: 44  Basic Latin: 28  Optimized Just like Latin-1, but – diacritics and + helpful stuff
  42.  Full: 112  Latin-1: 44  Basic Latin: 28  Optimized: 44 
  43. 
  44.  Full: 2.9 s
  45.  Full: 2.9 s Latin-1: 1.9 s
  46.  Full: 2.9 s Latin-1: 1.9 s Basic Latin: 1.5 s
  47.  Full: 2.9 s Latin-1: 1.9 s Basic Latin: 1.5 s Optimized: 1.7 s
  48.   1. Using a subset vs. using a font’s full character set
  49. ?
  50.   1. Using a subset vs. using a font’s full character set
  51.   1. Subseting, which means splitting 1 font file into multiple parts
  52. +- Basic Latin !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
  53.  ’  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  54.     !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  55.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  56.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  57.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  58.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  59.  
  60. @- { font-family: Gentium1; src: url(Gentium1.ttf ); }
  61. @- { font-family: Gentium1; src: url(Gentium1.ttf ); }
  62. @- { font-family: Gentium2; src: url(Gentium2.ttf ); }
  63. @- { font-family: Gentium3; src: url(Gentium3.ttf ); }
  64.  { font-family: “Gentium1”, “Gentium2”, “Gentium3”; }
  65.  Multiple font files can load in parallel.
  66.  Multiple font files can load in parallel (faster loading time.)
  67.  If you don’t have a font creation soware handy, you can’t get the full file.
  68.  If you don’t have a font creation soware handy, you can’t get the full file (harder to pirate.)
  69.  
  70. 
  71.  One set: 112 
  72.  Capital: 13  Lowercase: 13  Number: 12  Symbol: 33  Expert: 66 
  73.  One set: 112  Multiple subsets: 137 
  74. 
  75.  One set: 2.9 s
  76.  One set: 2.9 s Multiple subsets Capital, Lowercase, Number, Symbol & Expert (everything else)
  77.  One set: 2.9 s Multiple subsets: 1.9 s
  78.   1. Subseting, which means splitting 1 font file into multiple parts
  79. ?
  80.   1. Subset
  81.   1. Subset 2. Embed vs. linking directly to a font file
  82.  . 
  83.  Reading embedded data is faster than reading linked ones.
  84.  If you don’t pass the file through a Base-64 decoder, you can’t have it
  85.  If you don’t pass the file through a Base-64 decoder, you can’t have it (harder to pirate.)
  86. :   http://soware.hixie.ch/utilities/ cgi/data/data
  87.  
  88. @- { font-family: Gentium; }
  89. @- { font-family: Gentium; src: url(Gentium.ttf ); }
  90. @- { font-family: Gentium; src: url(Gentium.ttf ); }
  91. @- { font-family: Gentium; src: url(“data:font/ truetype;base64,…”); }
  92.  
  93. 
  94.  Linked: 2.9 s
  95.  Linked: 2.9 s Embedded: 1.9 s
  96.   1. Subset 2. Embed vs. linking directly to a font file
  97. ?
  98.   1. Subset
  99.   1. Subset 2. Embed
  100.   1. Subset 2. Embed vs. linking directly to a font file
  101.   1. Subset 2. Embed 3. Randomize
  102.   1. Subset 2. Embed 3. Randomize, A new way to secure.
  103. Proceed at your own risk.
  104. Proceed at your own risk (hacky, maybe faster & can be more efficient.)
  105. Proceed at your own risk (hacky, maybe faster & can be more efficient, but incredibly fun.)
  106. +- Basic Latin !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
  107.  ’  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  108.   !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  109.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  110.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  111.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  112.   !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  113.   !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  114.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  115.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  116.  !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  117.   !"#$%&'()*+,-./ 0123456789:;<=>?@ ABCDEFGHIJKLMNOPQ RSTUVWXYZ[^_` abcdefghijklmnopqrst uvwxyz{|}~
  118.  Multiple font files can load in parallel.
  119.  Multiple font files can load in parallel (but it’s illogically split and harder to manage.)
  120.  As if assembling isn’t hard enough already, the font is split at random.
  121.  As if assembling isn’t hard enough already, the font is split at random (good luck trying it.)
  122.   1. Subset 2. Embed 3. Randomize, A new way to secure.
  123. ?
  124.  ( )
  125.    
  126.           -
  127.       Plain
  128.       2.9
  129.       #1
  130.       1.9
  131.     - #2
  132.     - 1.9
  133.     - #1  #2
  134.     - 3.3
  135.         2.9 1.9   - 1.9 3.3
  136.   
  137.    One set + link
  138.     + 1 font file
  139.     + 1 font file Multiple sets + link
  140.     + 1 font file  + x font files
  141.     + 1 font file  + x font files One set + embedded
  142.     + 1 font file  + x font files 1  file
  143.     + 1 font file  + x font files 1  file Multiple sets + Embed
  144.     + 1 font file  + x font files 1  file 1  file (bigger)
  145. ?
  146.   1. Subset
  147.   1. Subset, which can means 2 things
  148.   1. Using a subset vs. using a font’s full character set
  149.   1. Subseting, which means splitting 1 font file into multiple parts
  150.   1. Subset 2. Embed
  151.   1. Subset 2. Embed vs. linking directly to a font file
  152.   1. Subset 2. Embed 3. Randomize
  153.   1. Subset 2. Embed 3. Randomize, a new way to secure
  154. 
  155.   1. File sizes (subseting can be good)
  156.   1. File sizes 2. Number of files to load (subseting can be bad)
  157.   1. File sizes 2. Number of files to load (subseting can be good, if file loads parallel)
  158.   1. File sizes 2. Number of files to load 3. File format (Base-64 is faster)
  159.   1. File sizes 2. Number of files to load 3. File format (Base-64 is faster, but be careful splitting it.)
  160.   1. File sizes 2. Number of files to load 3. File format (Also, don’t subset and embed all at once.)
  161. ?
  162. FASTER, & ()   WEBFONTS
  163. . bram@brampitoyo.com

×