SEO e realizzazione siti web Udine a misura di PMI
Come ho scritto nell’articolo sui Web fonts, Google Fonts è il miglior modo per utilizzare sul proprio sito dei fonts non standard. Google Fonts ha portato il web design ad un nuovo livello, garantendo alla tipografia del vostro sito, il classico effetto WOW!
Questo articolo fa parte del filone degli articoli che ho dedicato a come velocizzare un sito in WordPress, anche se ovviamente le sue indicazioni possono andare bene anche per qualsiasi tipo di sito.
Come web designer a Udine non ho mai dovuto ottimizzare questo aspetto ma se, i programmi che vanno ad analizzare le speed performance del vostro sito, vi segnalano che Google Fonts rallenta i tempi di caricamento, allora questa mia guida potrebbe proprio tornarvi utile.
Primo modo: caricare i file sul vostro server
Partiamo da una considerazione: per utilizzare Google Fonts sul vostro sito dovete richiamare un CSS esterno (che sta su un altro server) e che a sua volta richiama altri file (quelli dei font). Andate quindi all’indirizzo del CSS caricato da Google Fonts.
https://fonts.googleapis.com/css?family=Lora
/* cyrillic-ext */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/Ukd0sOIY4JZgcODPuj2G3Q.woff2) format('woff2'); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; } /* cyrillic */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/GsNxiN0oIzsS201cnUag6w.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
Le stringhe che vi ho evidenziato, presentano il percorso al font che avete utilizzato sul vostro sito. Visitate questi percorsi, scaricate questi file di tipo font e caricateli sul vostro spazio web (ad esempio nella cartella del theme del sito). Aggiungete quindi nel vostro css il richiamo al font che avete scaricato da Google Fonts e caricato sul vostro server.
/* cyrillic-ext */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; src: local('Lora Regular'), local('Lora-Regular'), url(https://www.miosito.it/wp-content/themes/miotema/Ukd0sOIY4JZgcODPuj2G3Q.woff2) format('woff2'); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; }
Secondo modo: caricare solo i caratteri di cui avete bisogno
Ipotizziamo che abbiate trovato il font perfetto su Google Font per stilizzare il solo logo del vostro sito, capite bene che non vale la pena di caricare l’intero set di caratteri se alla fin fine ci servono poche lettere. Ipotizziamo che il nostro font sia Lora e il nostro logo riporti la scritto “Laura Musig”.
Normalmente avremmo
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
Ma poiché a noi interessano solo poche lettere, per ottimizzare il caricamento di Google Fonts, scriveremo.
http://fonts.googleapis.com/css?family=Lora&text=LAURMSIG
Facile vero?
Web Designer e SEO Freelance a Udine o se preferite web designer SEO. Nel 2001 decisi di sezionare un sito web per vedere cosa c’era dentro, da allora creo e gestisco siti web. Lettrice onnivora, con un fisiologico bisogno di scrivere e di ballare.
In questa sezione propongo periodicamente approfondimenti a tema SEO e web marketing. Segnalo anche gli ultimi lavori di creazione siti web ad Udine e di posizionamento sui motori di ricerca.