SlideShare a Scribd company logo
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
1
Titolo slide
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
2
Titolo slide
Ci servono davvero font esterni?
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
Web Font
3
Tipologie di Font
Font di sistema
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
4
Font di sistema
// Soluzione utilizzata da UIKIT
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica
Neue",Arial,sans-serif;
// Soluzione utilizzata da Bootstrap
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
5
Web Font
• Un font web è una raccolta di glifi (può essere una forma
vettoriale che descrive una lettera o un simbolo)
• Ogni famiglia di font è composta da diverse varianti stilistiche
(normale, grassetto, corsivo) e diversi spessori per ogni stile
• I formati dei font più utilizzati sono quattro:
▪ Embedded Open Type (EOT)
▪ TrueType Font (TTF)
▪ Web Open Font Format (WOFF)
▪ Web Open Font Format (WOFF2)
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
6
Supporto dei Web Font
EOT OTF/TTF WOFF WOFF2
IE 8-11 x
IE 9-11 x x x
Edge 12-14 x x
Firefox 40-45 x x x
Chrome 43-49 x x x
Safari 8-9 x x
Opera 32-35 x x x
iOS Safari 8,4-9,1 x x
Android 4,4-44 x x
Chrome for Android 46 x x x
EOT OTF/TTF WOFF WOFF2
Compressione x x
Dimensioni ridotte x
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
1. Scaricare il font dal web e dichiararlo nel @font-face
7
Come caricare un Web Font
@font-face {
font-family: 'ciclefina’;
font-weight: normal;
font-style: normal;
src:
url() format();
local();
}
<link href="https://fonts.googleapis.com/css?family=Raleway"
rel="stylesheet">
2. Inserire un link da risorse esterne (esempio Google Fonts) e
richiamare il font nel CSS
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
8
Test delle prestazioni dei Web Font
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
9
Web Font e percorso di rendering critico
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
10
Differenze tra i browser
Timeout Fallback Swap
Chrome 35+ 3 secondi SI SI
Opera 3 secondi SI SI
Firefox 3 secondi SI SI
Internet Explorer 0 secondi SI SI
Safari NO N/A N/A
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
11
Problemi di caricamento di un Web Font
La soluzione è FOFT
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
Font Face Observer
Usare JavaScript per verificare quando un font è stato caricato
https://github.com/bramstein/fontfaceobserver
Font Face Onload
Usare JavaScript per verificare quando un font è stato caricato
https://github.com/zachleat/fontfaceonload
LoadCSS
Usare JavaScript per caricare in modo asincrono il CSS con font in Data URIs
https://github.com/filamentgroup/loadCSS
Web Font Loader
Usare JavaScript per controllare il caricamento di un Web Font
https://github.com/typekit/webfontloader
13
Possibili strategie
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
auto | block | swap | fallback | optional
14
Font display
<style>
@font-face {
font-family: 'Roboto';
font-display: swap;
src: local(),
url() format();
}
</style>
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
61.1%
La percentuale di pagine che evita il flash
del testo invisibile (FOIT)
durante il caricamento dei font Web
utilizzando la proprietà CSS
«font-display».
Questa metrica viene misurata da Lighthouse
ed è disponibile solo nei test su dispositivi mobile.
15
Font display
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
16
Precarico - Case History
Miglioramento del 50%
Riduzione di 1,2 secondi
(su Chrome desktop con preload)
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
• Ottimizzare il formato dei font per ogni browser
• Specificare le politiche ottimali di validazione e caching
• Verificare e controllare l’utilizzo dei font
17
Altri suggerimenti
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
18
La mia soluzione
Ridurre l’utilizzo dei Web Font ai soli titoli
Utilizzo di un Font di sistema per il testo
Riduzione tempi di caricamento del Font utilizzando dns-prefetch e
preload
Caricamento del Web Font senza che blocchi il rendering con
@font-face
Utilizzo di font-display: swap
Caricamento dell’intera pagina web senza risorse che bloccano il
rendering
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
Contenuti non ottimizzati
19
Analisi dati
Caricamento Google Font
classico link in head
Caricamento Google Font
con Javascript
Caricamento Google Font
con @font-face
First Contentful Paint (Chrome DevTools) 1,6 s 1,7 s 1,0 s
Font di base leggibile (Web Page Test) 4,0 s 4,4 s 3,6 s
Web font caricato (Web Page Test) 7,1 s (FOIT) Font non caricato 6,8 s
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
Contenuti ottimizzati con caricamento asincrono del CSS, caricamento pigro delle immagino below the fold
20
Analisi dati
Caricamento Google Font
classico link in head
Caricamento Google Font
con Javascript
Caricamento Google Font
con @font-face
First Contentful Paint (Chrome DevTools) 1,6 s 0,9 s 0,8 s
Font di base leggibile (Web Page Test) 7,7 s 2,0 s 2,0 s
Web font caricato (Web Page Test) 9,6 s (FOIT) 4,5 s 3,5 s
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
Zach Leatherman
https://www.zachleat.com/
https://www.zachleat.com/web/comprehensive-webfonts/
https://www.zachleat.com/web/five-whys/
https://noti.st/zachleat/KNaZEg#sMNiNxk
https://github.com/zachleat/web-font-loading-recipes
https://github.com/zachleat/fontfaceonload
Google Developers
https://developers.google.com/web/updates/2016/02/font-display
https://developers.google.com/web/fundamentals/performance/resource-prioritization
https://developers.google.com/web/fundamentals/performance/http2/
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching
https://developers.google.com/web/updates/2018/05/lighthouse#all_text_remains_visible_during_web_font_loads
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-
optimization#the_font_loading_api
21
Bibliografia
FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web.
CSS-TRICKS
https://css-tricks.com/font-display-masses/
https://css-tricks.com/fout-foit-foft/
https://css-tricks.com/really-dislike-fout-font-display-optional-might-jam/
https://css-tricks.com/snippets/css/system-font-stack/
https://css-tricks.com/snippets/css/using-font-face/
Altri siti
https://www.keycdn.com/blog/resource-hints#2-dns-prefetching
https://caniuse.com/
https://httparchive.org/reports/state-of-the-web#fontDisplay
https://github.com/typekit/webfontloader
https://jonsuh.com/blog/font-loading-with-font-events/
https://creativemarket.com/blog/the-missing-guide-to-font-formats
https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/
https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/
https://www.keycdn.com/blog/web-font-performance
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
22
Bibliografia

More Related Content

Similar to FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sito

EUGENIO PETULLÀ e ANDREA BARGHIGIANI_ Multimedia Blogging con WordPress
EUGENIO PETULLÀ e ANDREA BARGHIGIANI_ Multimedia Blogging con WordPressEUGENIO PETULLÀ e ANDREA BARGHIGIANI_ Multimedia Blogging con WordPress
EUGENIO PETULLÀ e ANDREA BARGHIGIANI_ Multimedia Blogging con WordPress
LVenture Group
 
Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…
Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…
Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…
bsdlover
 
International SEO - Come localizzare il proprio Sito - Monari Convegno GT 2012
International SEO - Come localizzare il proprio Sito - Monari Convegno GT 2012International SEO - Come localizzare il proprio Sito - Monari Convegno GT 2012
International SEO - Come localizzare il proprio Sito - Monari Convegno GT 2012
Bizup
 
WordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWAWordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWA
FrancescoGiammanco1
 
Guida Seo per Grafici e Web Designer
Guida Seo per Grafici e Web DesignerGuida Seo per Grafici e Web Designer
Guida Seo per Grafici e Web Designer
Fabio Granata
 
Corso Base Wordpress 1-21 | Panoramica (1 di 4)
Corso Base Wordpress 1-21 | Panoramica (1 di 4)Corso Base Wordpress 1-21 | Panoramica (1 di 4)
Corso Base Wordpress 1-21 | Panoramica (1 di 4)
armandocarcaterra
 
Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)
armandocarcaterra
 
Seo e prestashop
Seo e prestashopSeo e prestashop
Seo e prestashop
Giovanni Sacheli
 
EtnaDev 2015 - Windows Bridge
EtnaDev 2015 - Windows BridgeEtnaDev 2015 - Windows Bridge
EtnaDev 2015 - Windows Bridge
Gaetano Paternò
 
Progettato per specialisti del web
Progettato per specialisti del webProgettato per specialisti del web
Progettato per specialisti del web
Eugenio Uccheddu
 
Php for ASP.NET Developers
Php for ASP.NET DevelopersPhp for ASP.NET Developers
Php for ASP.NET Developers
Emanuele Bartolesi
 
Wordpress 4. come scrivere SEO
Wordpress 4. come scrivere SEOWordpress 4. come scrivere SEO
Wordpress 4. come scrivere SEO
City Planner
 
Bootstrap
BootstrapBootstrap
Bootstrap
Luca Modica
 
Webdays 2004 Blogfordummies2 Ok
Webdays 2004 Blogfordummies2 OkWebdays 2004 Blogfordummies2 Ok
Webdays 2004 Blogfordummies2 Ok
Massimo Schiro
 
6 - Il browser - 16/17
6 - Il browser - 16/176 - Il browser - 16/17
6 - Il browser - 16/17
Giuseppe Vizzari
 
06 - Il browser
06 - Il browser06 - Il browser
06 - Il browser
Giuseppe Vizzari
 
Wordpress Tuning SEO
Wordpress Tuning SEOWordpress Tuning SEO
Wordpress Tuning SEO
Davide Pozzi
 
Soluzioni integrate per il design e la comunicazione digital: Extensis
Soluzioni integrate per il design e la comunicazione digital: ExtensisSoluzioni integrate per il design e la comunicazione digital: Extensis
Soluzioni integrate per il design e la comunicazione digital: Extensis
Pico Srl
 
Seo Audit Demo
Seo Audit DemoSeo Audit Demo
Seo Audit Demo
Giovanni Sacheli
 

Similar to FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sito (20)

EUGENIO PETULLÀ e ANDREA BARGHIGIANI_ Multimedia Blogging con WordPress
EUGENIO PETULLÀ e ANDREA BARGHIGIANI_ Multimedia Blogging con WordPressEUGENIO PETULLÀ e ANDREA BARGHIGIANI_ Multimedia Blogging con WordPress
EUGENIO PETULLÀ e ANDREA BARGHIGIANI_ Multimedia Blogging con WordPress
 
Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…
Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…
Soluzioni Open Source per lo sviluppo di ogni tipologia di sito web. Il ca…
 
International SEO - Come localizzare il proprio Sito - Monari Convegno GT 2012
International SEO - Come localizzare il proprio Sito - Monari Convegno GT 2012International SEO - Come localizzare il proprio Sito - Monari Convegno GT 2012
International SEO - Come localizzare il proprio Sito - Monari Convegno GT 2012
 
WordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWAWordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWA
 
Guida Seo per Grafici e Web Designer
Guida Seo per Grafici e Web DesignerGuida Seo per Grafici e Web Designer
Guida Seo per Grafici e Web Designer
 
Corso Base Wordpress 1-21 | Panoramica (1 di 4)
Corso Base Wordpress 1-21 | Panoramica (1 di 4)Corso Base Wordpress 1-21 | Panoramica (1 di 4)
Corso Base Wordpress 1-21 | Panoramica (1 di 4)
 
Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)
 
Seo e prestashop
Seo e prestashopSeo e prestashop
Seo e prestashop
 
EtnaDev 2015 - Windows Bridge
EtnaDev 2015 - Windows BridgeEtnaDev 2015 - Windows Bridge
EtnaDev 2015 - Windows Bridge
 
Progettato per specialisti del web
Progettato per specialisti del webProgettato per specialisti del web
Progettato per specialisti del web
 
Php for ASP.NET Developers
Php for ASP.NET DevelopersPhp for ASP.NET Developers
Php for ASP.NET Developers
 
Wordpress 4. come scrivere SEO
Wordpress 4. come scrivere SEOWordpress 4. come scrivere SEO
Wordpress 4. come scrivere SEO
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Webdays 2004 Blogfordummies2 Ok
Webdays 2004 Blogfordummies2 OkWebdays 2004 Blogfordummies2 Ok
Webdays 2004 Blogfordummies2 Ok
 
6 - Il browser - 16/17
6 - Il browser - 16/176 - Il browser - 16/17
6 - Il browser - 16/17
 
06 - Il browser
06 - Il browser06 - Il browser
06 - Il browser
 
Wpo extended
Wpo extendedWpo extended
Wpo extended
 
Wordpress Tuning SEO
Wordpress Tuning SEOWordpress Tuning SEO
Wordpress Tuning SEO
 
Soluzioni integrate per il design e la comunicazione digital: Extensis
Soluzioni integrate per il design e la comunicazione digital: ExtensisSoluzioni integrate per il design e la comunicazione digital: Extensis
Soluzioni integrate per il design e la comunicazione digital: Extensis
 
Seo Audit Demo
Seo Audit DemoSeo Audit Demo
Seo Audit Demo
 

FONT LOAD: strategie per ottimizzare il caricamento dei font sul proprio sito

  • 1. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 1 Titolo slide
  • 2. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 2 Titolo slide Ci servono davvero font esterni?
  • 3. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Web Font 3 Tipologie di Font Font di sistema
  • 4. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 4 Font di sistema // Soluzione utilizzata da UIKIT font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; // Soluzione utilizzata da Bootstrap font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue", Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  • 5. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 5 Web Font • Un font web è una raccolta di glifi (può essere una forma vettoriale che descrive una lettera o un simbolo) • Ogni famiglia di font è composta da diverse varianti stilistiche (normale, grassetto, corsivo) e diversi spessori per ogni stile • I formati dei font più utilizzati sono quattro: ▪ Embedded Open Type (EOT) ▪ TrueType Font (TTF) ▪ Web Open Font Format (WOFF) ▪ Web Open Font Format (WOFF2)
  • 6. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 6 Supporto dei Web Font EOT OTF/TTF WOFF WOFF2 IE 8-11 x IE 9-11 x x x Edge 12-14 x x Firefox 40-45 x x x Chrome 43-49 x x x Safari 8-9 x x Opera 32-35 x x x iOS Safari 8,4-9,1 x x Android 4,4-44 x x Chrome for Android 46 x x x EOT OTF/TTF WOFF WOFF2 Compressione x x Dimensioni ridotte x
  • 7. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 1. Scaricare il font dal web e dichiararlo nel @font-face 7 Come caricare un Web Font @font-face { font-family: 'ciclefina’; font-weight: normal; font-style: normal; src: url() format(); local(); } <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 2. Inserire un link da risorse esterne (esempio Google Fonts) e richiamare il font nel CSS
  • 8. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 8 Test delle prestazioni dei Web Font
  • 9. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 9 Web Font e percorso di rendering critico
  • 10. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 10 Differenze tra i browser Timeout Fallback Swap Chrome 35+ 3 secondi SI SI Opera 3 secondi SI SI Firefox 3 secondi SI SI Internet Explorer 0 secondi SI SI Safari NO N/A N/A
  • 11. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 11 Problemi di caricamento di un Web Font
  • 13. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Font Face Observer Usare JavaScript per verificare quando un font è stato caricato https://github.com/bramstein/fontfaceobserver Font Face Onload Usare JavaScript per verificare quando un font è stato caricato https://github.com/zachleat/fontfaceonload LoadCSS Usare JavaScript per caricare in modo asincrono il CSS con font in Data URIs https://github.com/filamentgroup/loadCSS Web Font Loader Usare JavaScript per controllare il caricamento di un Web Font https://github.com/typekit/webfontloader 13 Possibili strategie
  • 14. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. auto | block | swap | fallback | optional 14 Font display <style> @font-face { font-family: 'Roboto'; font-display: swap; src: local(), url() format(); } </style>
  • 15. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 61.1% La percentuale di pagine che evita il flash del testo invisibile (FOIT) durante il caricamento dei font Web utilizzando la proprietà CSS «font-display». Questa metrica viene misurata da Lighthouse ed è disponibile solo nei test su dispositivi mobile. 15 Font display
  • 16. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 16 Precarico - Case History Miglioramento del 50% Riduzione di 1,2 secondi (su Chrome desktop con preload)
  • 17. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. • Ottimizzare il formato dei font per ogni browser • Specificare le politiche ottimali di validazione e caching • Verificare e controllare l’utilizzo dei font 17 Altri suggerimenti
  • 18. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. 18 La mia soluzione Ridurre l’utilizzo dei Web Font ai soli titoli Utilizzo di un Font di sistema per il testo Riduzione tempi di caricamento del Font utilizzando dns-prefetch e preload Caricamento del Web Font senza che blocchi il rendering con @font-face Utilizzo di font-display: swap Caricamento dell’intera pagina web senza risorse che bloccano il rendering
  • 19. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Contenuti non ottimizzati 19 Analisi dati Caricamento Google Font classico link in head Caricamento Google Font con Javascript Caricamento Google Font con @font-face First Contentful Paint (Chrome DevTools) 1,6 s 1,7 s 1,0 s Font di base leggibile (Web Page Test) 4,0 s 4,4 s 3,6 s Web font caricato (Web Page Test) 7,1 s (FOIT) Font non caricato 6,8 s
  • 20. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Contenuti ottimizzati con caricamento asincrono del CSS, caricamento pigro delle immagino below the fold 20 Analisi dati Caricamento Google Font classico link in head Caricamento Google Font con Javascript Caricamento Google Font con @font-face First Contentful Paint (Chrome DevTools) 1,6 s 0,9 s 0,8 s Font di base leggibile (Web Page Test) 7,7 s 2,0 s 2,0 s Web font caricato (Web Page Test) 9,6 s (FOIT) 4,5 s 3,5 s
  • 21. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. Zach Leatherman https://www.zachleat.com/ https://www.zachleat.com/web/comprehensive-webfonts/ https://www.zachleat.com/web/five-whys/ https://noti.st/zachleat/KNaZEg#sMNiNxk https://github.com/zachleat/web-font-loading-recipes https://github.com/zachleat/fontfaceonload Google Developers https://developers.google.com/web/updates/2016/02/font-display https://developers.google.com/web/fundamentals/performance/resource-prioritization https://developers.google.com/web/fundamentals/performance/http2/ https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching https://developers.google.com/web/updates/2018/05/lighthouse#all_text_remains_visible_during_web_font_loads https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont- optimization#the_font_loading_api 21 Bibliografia
  • 22. FONT LOAD Strategie per ottimizzare il caricamento dei font sul proprio sito web. CSS-TRICKS https://css-tricks.com/font-display-masses/ https://css-tricks.com/fout-foit-foft/ https://css-tricks.com/really-dislike-fout-font-display-optional-might-jam/ https://css-tricks.com/snippets/css/system-font-stack/ https://css-tricks.com/snippets/css/using-font-face/ Altri siti https://www.keycdn.com/blog/resource-hints#2-dns-prefetching https://caniuse.com/ https://httparchive.org/reports/state-of-the-web#fontDisplay https://github.com/typekit/webfontloader https://jonsuh.com/blog/font-loading-with-font-events/ https://creativemarket.com/blog/the-missing-guide-to-font-formats https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/ https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/ https://www.keycdn.com/blog/web-font-performance https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf 22 Bibliografia