FASTER, &
()
 
WEBFONTS
  bram@brampitoyo.com
3
 
 
1. Subset
 
1. Subset, which
   can mean 2 things
 
1. Using a subset
   vs. using a font’s
   full character set
 
1. Subseting,
   which means
   splitting 1 font file
   into multiple parts
 
1. Subset
2. Embed
 
1. Subset
2. Embed
   vs. linking directly
   to a font file
 
1. Subset
2. Embed
3. Randomize
 
1. Subset
2. Embed
3. Randomize,
   a new way to secure
 
1. Subset
2. Embed
   Make webfonts both
   faster & more secure
 


3. Randomize
   Taking a step further
 ’  
   formats
 ’  
   formats,
although, let’s talk
about it over beer
aerwards.
 
Fonts should be naked,
or come with minimal
obscuring
 
Fonts should be naked,
or come with minimal
obscuring, because it
creates the best user &
developer experien...
 
Fonts should be naked,
or come with minimal
obscuring, because it
creates the best user &
developer experien...
 
Fonts should be naked,
or come with minimal
obscuring, because it
creates the fastest
experience.
 
Fonts should be naked,
or come with minimal
obscuring, because it
creates the most
compatible experience
 
Fonts should be naked,
or come with minimal
obscuring, because it
creates the most
@font-face browsers
 
Fonts should be naked,
or come with minimal
obscuring, because it
creates the least
complex experience.
 
Fonts should be naked,
or come with minimal
obscuring, because it
creates the less bugs
for you and me
 
1. Using a subset
   vs. using a font’s
   full character set
+-
Basic Latin
 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
+-
Latin-1 Supplement
 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~...
+-, -
Punc., Currency, Number Forms
 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghi...

http://zenoplex.jp/tools/
unicoderange_generator.html
— ,
 -
@- {
font-family: Gentium;
src: url(Gentium.ttf );

}
@- {
font-family: Gentium;
src: url(Gentium.ttf );
unicode-range:+-
}

Most of our documents
are designed to be typeset
in 1 language.

Most of our documents
are designed to be typeset
in 1 language (it’s faster
to load what you use.)
 

Full:
Basic Latin, Latin-1,
Latin Extended-A, Greek,
Cyrillic, Punctuation, Super &
Sub, Currency, Number Forms

Full: 112 

Full: 112 
Latin-1: 44 

Full: 112 
Latin-1: 44 
Basic Latin: 28 

Full: 112 
Latin-1: 44 
Basic Latin: 28 
Optimized
Basic Latin, Fractions,
Punctuation, Currency, Math

Full: 112 
Latin-1: 44 
Basic Latin: 28 
Optimized
Just like Latin-1, but
– diacritics and + helpful stuff

Full: 112 
Latin-1: 44 
Basic Latin: 28 
Optimized: 44 


Full: 2.9 s

Full: 2.9 s
Latin-1: 1.9 s

Full: 2.9 s
Latin-1: 1.9 s
Basic Latin: 1.5 s

Full: 2.9 s
Latin-1: 1.9 s
Basic Latin: 1.5 s
Optimized: 1.7 s
 
1. Using a subset
   vs. using a font’s
   full character set
?
 
1. Using a subset
   vs. using a font’s
   full character set
 
1. Subseting,
   which means
   splitting 1 font file
   into multiple parts
+-
Basic Latin
 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
 ’ 
 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~
   
 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~
 
@- {
font-family: Gentium1;
src: url(Gentium1.ttf );
}
@- {
font-family: Gentium1;
src: url(Gentium1.ttf );
}
@- {
font-family: Gentium2;
src: url(Gentium2.ttf );
}
@- {
font-family: Gentium3;
src: url(Gentium3.ttf );
}
 {
 font-family:
  “Gentium1”,
  “Gentium2”,
  “Gentium3”;   }

Multiple font files can
load in parallel.

Multiple font files can
load in parallel
(faster loading time.)

If you don’t have a font
creation soware handy,
you can’t get the full file.

If you don’t have a font
creation soware handy,
you can’t get the full file
(harder to pirate.)
 


One set: 112 

Capital: 13 
Lowercase: 13 
Number: 12 
Symbol: 33 
Expert: 66 

One set: 112 
Multiple subsets: 137 


One set: 2.9 s

One set: 2.9 s
Multiple subsets
Capital, Lowercase,
Number, Symbol &
Expert (everything else)

One set: 2.9 s
Multiple subsets: 1.9 s
 
1. Subseting,
   which means
   splitting 1 font file
   into multiple parts
?
 
1. Subset
 
1. Subset
2. Embed
   vs. linking directly
   to a font file
 . 

Reading embedded data
is faster than reading
linked ones.

If you don’t pass the file
through a Base-64
decoder, you can’t have it

If you don’t pass the file
through a Base-64
decoder, you can’t have it
(harder to pirate.)
:  
http://soware.hixie.ch/utilities/
cgi/data/data
 
@- {
font-family: Gentium;


}
@- {
font-family: Gentium;
src: url(Gentium.ttf );

}
@- {
font-family: Gentium;
src: url(Gentium.ttf );

}
@- {
font-family: Gentium;
src: url(“data:font/
truetype;base64,…”);
}
 


Linked: 2.9 s

Linked: 2.9 s
Embedded: 1.9 s
 
1. Subset
2. Embed
   vs. linking directly
   to a font file
?
 
1. Subset
 
1. Subset
2. Embed
 
1. Subset
2. Embed
   vs. linking directly
   to a font file
 
1. Subset
2. Embed
3. Randomize
 
1. Subset
2. Embed
3. Randomize,
   A new way to secure.
Proceed at your own risk.
Proceed at your own risk
(hacky, maybe faster
& can be more efficient.)
Proceed at your own risk
(hacky, maybe faster
& can be more efficient,
but incredibly fun.)
+-
Basic Latin
 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
 ’ 
 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~
 
 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~
 
 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~
 
 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~
 
 !"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

Multiple font files can
load in parallel.

Multiple font files can
load in parallel
(but it’s illogically split
and harder to manage.)

As if assembling isn’t
hard enough already, the
font is split at random.

As if assembling isn’t
hard enough already, the
font is split at random
(good luck trying it.)
 
1. Subset
2. Embed
3. Randomize,
   A new way to secure.
?
 ( )
     
    
     
                    


 
    


 
  -

                


 
          Plain

                


 
          2.9

                 


 
            #1

                 


 
           1.9

             




 
  -    #2

             




 
  -    1.9

               




 
  -    #1  #2

              




 
  -     3.3
     
                    


 
          2.9       1.9
 
  -     ...
  
  
One set + link
  
 + 1 font file
  
 + 1 font file
Multiple sets + link
  
 + 1 font file
 + x font files
  
 + 1 font file
 + x font files
One set + embedded
  
 + 1 font file
 + x font files
1  file
  
 + 1 font file
 + x font files
1  file
Multiple sets + Embed
  
 + 1 font file
 + x font files
1  file
1  file (bigger)
?
 
1. Subset
 
1. Subset, which
   can means 2 things
 
1. Using a subset
   vs. using a font’s
   full character set
 
1. Subseting,
   which means
   splitting 1 font file
   into multiple parts
 
1. Subset
2. Embed
 
1. Subset
2. Embed
   vs. linking directly
   to a font file
 
1. Subset
2. Embed
3. Randomize
 
1. Subset
2. Embed
3. Randomize,
   a new way to secure

 
1. File sizes
   (subseting can be good)
 
1. File sizes
2. Number of files to load
   (subseting can be bad)
 
1. File sizes
2. Number of files to load
   (subseting can be good,
    if file loads parallel)
 
1. File sizes
2. Number of files to load
3. File format
   (Base-64 is faster)
 
1. File sizes
2. Number of files to load
3. File format
   (Base-64 is faster, but
    be careful splitting it...
 
1. File sizes
2. Number of files to load
3. File format
   (Also, don’t subset and
    embed all at once.)
?
FASTER, &
()
 
WEBFONTS
.
bram@brampitoyo.com
Upcoming SlideShare
Loading in …5
×

Faster, and (Coincidentally) More Secure Webfonts

7,870 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
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
7,870
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
30
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

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

×