Faster, & (Coincidentally) More Secure WEBFONT

8/8/2019 Faster, & (Coincidentally) More Secure WEBFONT

1/163

FASTER, &()[email protected]
mailto:[email protected]:[email protected]:[email protected]:[email protected]


2/163

3


3/163


4/163

1. Subset


5/163

1. Subset, which

can mean 2 things


6/163

1. Using a subset

vs. using a fontsfull character set


7/163

1. Subseting,

which meanssplitting 1 font fileinto multiple parts


8/163

1. Subset

2. Embed


9/163

1. Subset

2. Embedvs. linking directlyto a font file


10/163

1. Subset

2. Embed. Randomize


11/163

1. Subset

2. Embed. Randomize,a new way to secure


12/163

1. Subset

2. EmbedMake webfonts bothfaster &more secure


13/163

. RandomizeTaking a step further


14/163

formats


15/163

formats,

although, lets talkabout it over beeraerwards.


16/163

Fonts should be naked,

or come with minimalobscuring


17/163


or come with minimalobscuring,because itcreates the best user &developer experience.


18/163


19/163


or come with minimalobscuring, because itcreates the fastestexperience.


20/163


or come with minimalobscuring, because itcreates the mostcompatible experience


21/163


or come with minimalobscuring, because itcreates the most@font-face browsers


22/163


or come with minimalobscuring, because itcreates the leastcomplexexperience.


23/163


or come with minimalobscuring, because itcreates the less bugsfor you and me


24/163

1. Using a subset



25/163

+-Basic Latin!"#$%&'()*+,-./0123456789:;?@ABCDEFGHIJKLMNOPQRSTUVW

XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~


26/163

+-Latin-1 Supplement!"#$%&'()*+,-./0123456789:;?@ABCDEFGHIJKLMNOPQRSTUVW

XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~-


27/163

+-, -Punc., Currency, Number Forms!"#$%&'()*+,-./0123456789:;?@ABCDEFGHIJKLMNOPQRSTUVW

XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~-


28/163

http://zenoplex.jp/tools/unicoderange_generator.html
http://www.zenoplex.jp/tools/unicoderange_generator.htmlhttp://www.zenoplex.jp/tools/unicoderange_generator.htmlhttp://www.zenoplex.jp/tools/unicoderange_generator.htmlhttp://www.zenoplex.jp/tools/unicoderange_generator.htmlhttp://www.zenoplex.jp/tools/unicoderange_generator.htmlhttp://www.zenoplex.jp/tools/unicoderange_generator.html


29/163

,


30/163

-


31/163

@- {font-family: Gentium;

src: url(Gentium.ttf );

}


32/163


src: url(Gentium.ttf );unicode-range:+-}


33/163

Most of our documents

are designed to be typesetin 1 language.


34/163

Most of our documents

are designed to be typesetin 1 language (its faster

to load what you use.)


35/163


36/163

Full:Basic Latin, Latin-1,Latin Extended-A, Greek,

Cyrillic, Punctuation, Super &Sub, Currency, Number Forms


37/163

Full: 112


38/163

Full: 112

Latin-1: 44


39/163

Full: 112

Latin-1: 44 Basic Latin: 28


40/163

Full: 112


OptimizedBasic Latin, Fractions,

Punctuation Currency Math


41/163

Full: 112


OptimizedJust like Latin-1, but

diacritics and + helpful stuff


42/163

Full: 112


Optimized: 44


43/163


44/163

Full: 2.9 s


45/163

Full: 2.9 s

Latin-1: 1.9 s


46/163

Full: 2.9 s

Latin-1: 1.9 sBasic Latin: 1.5 s


47/163

Full: 2.9 s

Latin-1: 1.9 sBasic Latin: 1.5 s

Optimized: 1.7 s


48/163

1. Using a subset



49/163

?


50/163

1. Using a subset



51/163

1. Subseting,

which meanssplitting 1 font file

into multiple parts


52/163

+-Basic Latin!"#$%&'()*+,-./0123456789:;?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~


53/163

!"#$%&'()*+,-./

0123456789:;?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\^_`abcdefghijklmnopqrstuvwxyz{|}~


54/163

!"#$%&'()*+,-./



55/163

!"#$%&'()*+,-./



56/163

!"#$%&'()*+,-./



57/163

!"#$%&'()*+,-./



58/163

!"#$%&'()*+,-./



59/163


60/163

@- {font-family: Gentium1;

src: url(Gentium1.ttf );}


61/163


src: url(Gentium1.ttf);}


62/163




63/163




64/163

{font-family:

Gentium1,Gentium2,

Gentium3; }


65/163

Multiple font files can

load in parallel.


66/163


load in parallel( faster loading time.)


67/163

If you dont have a font

creation soware handy,you cant get the full file.


68/163

If you dont have a font

creation soware handy,you cant get the full file

(harder to pirate.)


69/163


70/163


71/163

One set: 112


72/163

Capital: 13

Lowercase: 13 Number: 12

Symbol: 33 Expert: 66


73/163

One set: 112

Multiple subsets: 137


74/163


75/163

One set: 2.9 s


76/163

One set: 2.9 s

Multiple subsetsCapital, Lowercase,

Number, Symbol &Expert (everything else)


77/163

One set: 2.9 s

Multiple subsets: 1.9 s


78/163

1. Subseting,


into multiple parts


79/163

?


80/163

1. Subset


81/163

1. Subset

2. Embedvs. linking directly

to a font file


82/163

.


83/163

Reading embedded data

is faster than readinglinked ones.


84/163

If you dont pass the file

through a Base-64decoder, you cant have it


85/163

If you dont pass the file

through a Base-64decoder, you cant have it

(harder to pirate.)


86/163

: http://soware.hixie.ch/utilities/

cgi/data/data
http://software.hixie.ch/http://software.hixie.ch/http://software.hixie.ch/http://software.hixie.ch/


87/163


88/163


}


89/163


src: url(Gentium.ttf );

}


90/163


src: url(Gentium.ttf);

}


91/163


src: url(data:font/truetype;base64,);

}


92/163


93/163


94/163

Linked: 2.9 s


95/163

Linked: 2.9 s

Embedded: 1.9 s


96/163

1. Subset


to a font file


97/163

?


98/163

1. Subset


99/163

1. Subset

2. Embed


100/163

1. Subset


to a font file


101/163

1. Subset

2. Embed3.Randomize


102/163

1. Subset

2. Embed3.Randomize,

A new way to secure.


103/163

Proceed at your own risk.


104/163

Proceed at your own risk

(hacky, maybe faster& can be more efficient.)


105/163

Proceed at your own risk

(hacky, maybe faster& can be more efficient,

but incredibly fun.)


106/163

+-Basic Latin!"#$%&'()*+,-./0123456789:;?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~


107/163

!"#$%&'()*+,-./



108/163

!"#$%&'()*+,-./



109/163

!"#$%&'()*+,-./



110/163

!"#$%&'()*+,-./



111/163

!"#$%&'()*+,-./



112/163

!"#$%&'()*+,-./



113/163

!"#$%&'()*+,-./



114/163

!"#$%&'()*+,-./



115/163

!"#$%&'()*+,-./



116/163

!"#$%&'()*+,-./



117/163

!"#$%&'()*+,-./



118/163


load in parallel.


119/163


load in parallel(but its illogically split

and harder to manage.)


120/163

As if assembling isnt

hard enough already, theont is split at random.


121/163

As if assembling isnt

hard enough already, theont is split at random

(good luck trying it.)


122/163

1. Subset

2. Embed3.Randomize,

A new way to secure.


123/163

?


124/163

()


125/163


126/163

-


127/163

Plain


128/163

2.9


129/163

#1


130/163

1.9


131/163

-

#2


132/163

-

1.9


133/163

-

#1

#2


134/163

-

3.3


135/163

2.9 1.9

-

1.9 3.3


136/163


137/163

One set + link


138/163

+ 1 font file


139/163

+ 1 font file

Multiple sets + link


140/163

+ 1 font file

+ x font files


141/163

+ 1 font file

+ x font filesOne set + embedded


142/163

+ 1 font file

+ x font files1 file


143/163

+ 1 font file


Multiple sets + Embed


144/163

+ 1 font file


1 file (bigger)


145/163

?


146/163


147/163

1. Subset, which

can means 2 things


148/163

1. Using a subset



149/163

1. Subseting,


into multiple parts


150/163

1. Subset

2. Embed


151/163

1. Subset


to a font file


152/163

1. Subset

2. Embed. Randomize


153/163

1. Subset

2. Embed. Randomize,

a new way to secure


154/163


155/163

1. File sizes

(subseting can be good)


156/163

1. File sizes

2. Number of files to load(subseting can be bad)


157/163

1. File sizes

2. Number of files to load(subseting can be good,

if file loads parallel)


158/163

1. File sizes

2. Number of files to load. File format

(Base-64 is faster)


159/163

1. File sizes


(Base-64 is faster, butbe careful splitting it.)


160/163

1. File sizes


(Also, dont subset andembed all at once.)


161/163

?


162/163

FASTER, &(

)WEBFONTS


163/163

Faster, & (Coincidentally) More Secure WEBFONT

Documents

Transcript of Faster, & (Coincidentally) More Secure WEBFONT