Font per siti web: Google web fonts
Di Marco Barontini del 21/02/2012 @ 15:40:13, in CSS Design
La scelta del font da usare all'interno delle pagine
dei siti web è sempre stata assai limitata.
Il font richiamato all'interno del nostro file CSS, per essere
visualizzato correttamente, deve essere presente nella raccolta
di font installati sulla macchina client. Per questo le famiglie
di font Arial, Helvetica, Verdana, Times hanno imposto la loro
"supremazia" sul web.
Erano (e sono) i tipi di font la cui presenza è praticamente
assicurata su tutte le piattaforme (Windows, Mac, *nix) oltre ad essere
i font che offrono senz'altro il grado più elevato di leggibilità a video.
Ai web design più creativi che non volevano comunque rinunciare ad un proprio stile personale sono venuti
in soccorso alcuni strumenti di font replacement come sIFR
o Cufòn,
che però (a mio avviso) sono utilizzabili solo per alcuni tag specifici
della pagina (come i tag designati per i titoli h1, h2, h3, ecc) e che comunque
introducono un certo grado di "pesantezza" nella pagina web stessa
dovendo richiamare sia il file JavaScript di gestione del font replacement sia
quello contenente la codifica del font. Inoltre tale tecnica è inutilizzabile
nel caso l'utente abbia disattivato il caricamento di Javascript sul proprio browser.
Con Google web fonts
si introduce invece un paradigma diverso basato sul concetto (tanto di moda
in questo momento) di "cloud". Le specifiche del font che ci
interessa si trovano su server esterni (di Google) e si richiamano tramite
un'apposita istruzione all'interno della sezione <head> della nostra
pagina web. Definito il font da usare lo si può implementare
all'interno del nostro file CSS tramite il suo nome.
Nell'immagine qui sotto potete vedere la pagina del sito Google web fonts
da cui si può precedere alla scelta e selezione dei font.
Una volta selezionato il font che più ci piace possiamo vedere, tramite
il link Quick-use, l'impatto che avrà
nel caricamento della pagina (se rallenterà o meno il caricamento della
pagina e di quanto).
Nella stessa pagina troveremo inoltre la direttiva
(che non è di tipo JavaScript bensi "text/css" e quindi immune dal problema detto in precedenza)
da copiare nella nostra pagina web per richiamare il font prescelto
oltre ad un esempio di integrazione all'interno del file CSS.
Nelle 2 immagini qui sotto potete vedere come introdurre la riga contenente
la direttiva per richiamare il font 'Doppio one' e un esempio di
utilizzo del font stesso all'interno del tag h1 del file CSS.
