Your SlideShare is downloading. ×
Faster, and (Coincidentally) More Secure Webfonts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Faster, and (Coincidentally) More Secure Webfonts

3,450
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 …

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

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,450
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
30
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×