Il problema dei font è da sempre un punto a sfavore per tutti gli Web Designer che nel costruire un sito web dovevano fare i conti con i cosidetti “Font Web” ossia quella cerchia ristretta di font (Arial, Helvetica, Times New Roman, sans-serif, ecc…) che era possibile utilizzare per essere certi che fossero fisicamente contenuti all’interno della libreria del sistema opertivo, in altro parole per garantirne la compatiblità e la corretta visualizzazione.
Esistono ad oggi moltissimi strumenti per superare questo ostacolo ed incorporare i vari font, come, giusto per citarne uno (Font Squirrel) come parlavo in un mio precedente post ma la cosa è diventata a mio avviso macchinosa in quanto occorreva:
- Scaricare il pacchetto contenente il font
- Caricarlo in ftp
- Richiamare i font all’interno del Css
- Aggiungerlo all’attributo “Font Family”
Ma oggi vi voglio presentare Google Web Font, uno strumento a mio avviso fantastico in termini di semplicità di utilizzo e di comodità.
Google Web Font rappresenta una vastissima libreria di font OpenSource (presente sui loro server), suddivisa in categorie, che possiamo sfruttare utilizzandola all’interno di qualsiasi sito web semplicemente inserendo una riga di codice.
Ma vediamo immediatamente come funziona:
1= E’ possbilite accedere alla libreria Google Web Font a questo indirizzo dove possiamo scegliere il font che più ci piace
2= Una volta individuato il font possiamo notare tute le sue caratteristiche, testarlo, premendo il puntante “Launch in font previewer” dove possiamo editare del testo per vederne l’immediato risultato con il nostro testo o semplicemente utilizzarlo nel nostro sito web cliccando sul pulsante “Use this font” (v.Figura).
3= … Non resta altro che implementare il font
A questo punto l’unica cosa che occorre fare è richiamare il font all’interno del tag <head></head> del nostro template inserendo il codice fornito, ad esempio:
<link href='http://fonts.googleapis.com/css?family=Artifika' rel='stylesheet' type='text/css'>
Infine basta inserire il nome del font (nel nostro esempio Artifika) all’interno del nostro css:
h1 { font-family: 'Artifika', arial, serif; }
Ti ringrazio molto per questa segnalazione.
Un ottimo Spunto direi.
Grazie Erica. Continua a seguirci
Qualcuno sa se c’è un modo per testarli anche in locale? Thanks
Ciao Alessandro, per testare un font in locale è la stessa identica cosa che testarlo on line.
Basta integrare la stringa fornita da google all’interno della sezione head e richiamare il font nel foglio di stile (V. punto 3 tutorial)ed il gioco è fatto.
Ovviamente devi avere una connessione perchè il file fornito da Google è depositato sui loro server ma funziona benissimo anche on-line. Non vedo dove sta il problema…
In caso di problemi rispondi pure.
Poniamo il caso di riuscire a pubblicare una 50ina di siti web con l’applicazione del metodo google web fonts per i caratteri, in un dato momento google o abbandona l’idea o la modifica o sposta semplicemente il dominio a cui fa riferimento, a questo punto mi ritrovo con 50 siti web da correggere, utilizzarli sarebbe davvero una pessima idea….. dovrebbero studiare un altro modo
Ciao Manuel, grazie per averci scritto.
Si tecnicamente quello che dici potrebbe non è sbagliato anche se ti posso dire che utilizzo personalmente gli strumenti offerti da google da ormai vari anni (molto prestanti e duraturi nel tempo) e devo dire che la cosa è veramente molto improvabile…
Puoi tranquillamente recuperarti i font da altre fonti e incorporarli nel tuo spazio web a discapito però delle prestazioni.
Io rimango dell’idea (e rispondo al quesito post da manuel, in qualche modo) che sia meglio caricare i font in locale sul sito, creando un font-face mediante file eot/svg, come esemplificato di seguito per Chunkfive:
@font-face {
font-family: ‘Chunkfive’;
src: url(‘font/Chunkfive.eot’);
src: local(‘☺’), url(‘font/Chunkfive.woff’) format(‘woff’),
url(‘font/Chunkfive.ttf’) format(‘truetype’),
url(‘font/Chunkfive.svg#webfontB9LMdHvb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
quantomeno siamo sicuri che se Google chiudesse il progetto (non dovrebbe, a rigor di logica… i web font sono un’innovazione assoluta!) i nostri caratteri sarebbero visualizzati comunque correttamente. Ciao e grazie delle indicazioni
Ma una volta che google font ha generato il codice per il font utilizzato, dove lo devo inserire? cioè come si chiama il file nel quale devo inserire questa stringa?
Grazie