Google ha appena reso più semplice questo processo in modo significativo con il lancio del suo Font previewer.
Per anni siamo stati costretti ad utilizzare gli stessi caratteri: Arial, Georgia, Verdana, Times New Roman – la maggioranza font che gli utenti hanno installato sul loro computer.
Ma recentemente la comunità web design ha fatto tanti progressi. “Web Fonts” è un termine generico che si riferisce al metodo di servire file di font (lo stesso tipo di file che avete installato sul vostro computer) per i visitatori del tuo sito in modo da poterli garantire la visualizzazione delle tue pagine web con i font che hai utilizzato.
In questa guida vedremo uno modo di implentare font gratuiti utilizzando un servizio web chiamato Google Font API.
Se avete suggerimenti per come usare Google Font API non esitare a lasciare un commento.
1. Nozioni di base di Google Font Api
L’API è facile da usare e non richiede ottime competenze di programmazione. Se hai creato un sito web probabilmente hai le nozioni di base per implementare Google Font Api. E se non lo hai mai fatto faremo del nostro meglio per insegnarti questo bellisimo strumento.
2. Come funziona: @ font-face
Google Font API utilizza una proprietà CSS chiamata @ font-face. Se non hai sentito parlare prima non ti preoccupare, la maggior parte delle persone non lo sanno – non è necessario essere a conoscenza per l’utilizzo di Google Font API.
@ Font-face permette di utilizzare file di caratteri (che hanno le estensioni come .Otf e .TTF) proprio come nelle applicazioni desktop (Microsoft Word o Adobe Photoshop).
Il problema con @ font-face è stato che i vari tipi di browser web richiedono diversi tipi di carattere. Ad esempio internet Explorer richiede un file .EOT (embedded di tipo aperto), mentre Firefox ha bisogno di .otf (font di tipo aperto. Quindi gli sviluppatori hanno creato soluzioni alternative per implementare @ font-face in modo che funzioni su tutti i browser, ad esempio utilizzando un CSS condizionale che restituisce il tipo di file appropriato a seconda del browser web dell’utente.
Un altro problema con l’utilizzo di @ font-face è la licenza degli stessi caratteri: è una questione giuridica. Anche se è stato acquistato per le vostre applicazioni desktop non possono essere ammessi per l’uso web.
Google font API risolve tutti questi problemi.
3. Vantaggi nell’utilizzare Google Font API
L’utilizzo di Google Font API è una buona soluzione per evitare i molti problemi che esistono quando si utilizzano @ font-face nel proprio sito web. In primo luogo il servizio Web semplifica la realizzazione di font per il web. Con una sola riga di codice e CSS è possibile implementare Google font API nel giro di pochi minuti. Nessuna necessità di preoccuparsi per la gestione del web browser o capire come lavora @ font-face – Google Font API gestisce tutto per te.
I caratteri sono ufficialmente supportati da tutti i principali browser come Internet Explorer, Firefox e Safari – Che a sua volta suggerisce che altri meno web browser diffusi lo sosterranno pure.
I font di Google sono open source e sono sono a carico di Google. Ciò significa che è possibile dormire meglio la notte e non preoccuparti se avrai guai giuridici per l’utilizzo di un font che non avresti dovuto essere utilizzato.
Ci sono anche vantaggi tecnologici per l’utilizzo di Google Font API. L’infrastruttura di Google è apprezzato in tutto il mondo IT per la sua capacità di sostenere elevati livelli di traffico. L’azienda è un pioniere e leader delle prestazioni. Inoltre se un utente ha visitato un altro sito web che utilizza Google Font API potrebbe già avere il carattere necessario nella memoria cache del browser, accelerando così i tempi di risposta della pagina del proprio sito web.
Forse il più grande vantaggio di tutto questo è che è gratis. Non ci sono prerequisiti nell’utilizzare Google Font API.
4. Come utilizzare Google font API
Google font API è ben documentato in inglese
5. Utilizzo di base
Ci sono due passi da eseguire per imlementare Google Font API.
Il primo passo è quello di riferimento fogli di stile CSS che bisogna inserire nel documento HTML, più precisamente all’interno dei tag. Questo riferimento dovrebbe essere in tutte le pagine web che utilizzeranno il tipo di carattere che richiedi da parte di Google Font API.
Questo sarà un gioco da ragazzi se si utilizza un sistema di gestione dei contenuti o piattaforma di blogging come WordPress perché inserisci solo una volta questo riferimento nel tuo template.
Se si dispone di un sito HTML statico, allora bisogna inserire questo codice in tutte le pagine web, o se hai un file CSS, è possibile utilizzare la proprietà @import di CSS.
Nell’esempio che segue vediamo il tag che fa riferimento a Google API. Il valore di href è il più importante – FontName è il tipo di carattere che vogliamo utilizzare nella nostra pagina web. È possibile sostituire il valore FontName con uno dei caratteri supportati, che potete trovare nel carattere di Google Directory.
</head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FontName">
</head>/>
Il secondo passo è quello di utilizzare i CSS per specificare come si vuole utilizzare il carattere che abbiamo chiesto.
Diciamo che vogliamo utilizzare il carattere FontName su tutti i tag paragrafo nelle nostre pagine web.
Dobbiamo utilizzare il seguente codice CSS:
p {
font-family: 'FontName';
font-size: 12px;
}
Quello che il codice dici fa capire sopra: “Tutti P[aragrafi] devono utilizzare il carattere ‘FontName’ di dimensione 12px.”
6. Utilizzare diversi tipi di carattere di Google font API
Ora che si ha familiarità con il formato di base nell’utilizzare Google Font API esploriamo alcuni metodi avanzati.
Per impostazione predefinita si ottiene lo stile normale di un carattere particolare. Ma cosa succede se si vuole utilizzare e visualizzare un altro stile, come ad esempio corsivo o grassetto?
Facile. Basta aggiungere due punti (:) alla fine del nome del font seguita dallo stile desiderato. E se avete bisogno di più di uno stile basta separarli con una virgola (,).
Ad esempio, se si desidera che la versione in grassetto e corsivo di FontName allora il riferimento diventa:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FontName:italic,bold">
Gli stili possono essere usati in corsivo, grassetto e corsivo grassetto.
7. Richiesta di più caratteri
Spesso vengono utilizzati più font. Non c’è alcun bisogno di fare più riferimenti, se questo è il caso. Tutto quello che devi fare è aggiungere la tua richiesta con il simbolo | seguito dl nome del carattere.
Diciamo che vogliamo utilizzare la versione in grassetto e corsivo di FontName e lo stile corsivo di un altro Font, il nostro link diventa:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=FontName:bolditalic|AltroFontName:italic">
Questo è tutto ciò che devi fare!
8. Strumenti per lavorare con Google Font API
Google ha creato alcuni strumenti per aiutarvi a lavorare con il font API di Google, tra cui Font directory, Previewer e Web Font Loader.
1. Google Font Directory
Il Google Font Directory elenca tutti i font disponibili che si può utilizzare. Ci sono attualmente 18 caratteri disponibili, come Droid Sans, Molengo e Nobile. Cliccando su ogni anteprima di un font vengono visualizzati ulteriori informazioni come il progettista del carattere, il tipo di licenza del font, l’intero set di caratteri, e altro ancora. Inoltre cliccando sulla scheda “Get the code” viene visualizzato il codice che è possibile copiare e incollare per ottenere il tipo di carattere.
2. Google Font Previewer
Lo strumento di Google Font Previewer ti permette di sperimentare ogni tipo di carattere. È possibile modificare le caratteristiche dei font come la dimensione, lo stile, e la spaziatura. Una volta che ti piace quello che vedi viene generato il codice necessario per utilizzare il font di Google.
3. Web Font Loader
Per gli sviluppatori web che necessitano di un maggiore controllo dei caratteri di Google c’è una libreria JavaScript da poter utilizzare.
Articoli correlati: