Utilizza Google Web Fonts sul tuo sito web

Non sono un esperto di tipografia, ma l'uso degli stessi caratteri standard per il tuo sito web diventa noioso. Google Web Fonts include un'intera libreria di font ospitati per il tuo prossimo progetto web. Questo tutorial sulle ricette tecniche spiega come configurare Google Web Fonts sul tuo sito.

1 Browser su http://www.google.com/webfonts/

2 Sfoglia tutti i font e trova quello che vuoi usare. Hai la possibilità di utilizzare solo 1 famiglia di font o di utilizzare più. Per prima cosa, vediamo come utilizzare una famiglia di font da sola. Inizia selezionando il link "Uso rapido".

3 Vedrete alcune informazioni come il tempo di caricamento della pagina usando questo font web. Ricorda, il browser dovrà controllare il server di Google per afferrare il carattere e visualizzarlo ai visitatori. Al passaggio 3 abbiamo 3 opzioni su come usare questi font. Possiamo usare un link standard, @import o Javascript. Si tratta di preferenze personali, ma io uso semplicemente l'attributo link standard.

4 Ora copia e incolla il codice nell'intestazione del tuo sito web proprio come faresti con il link a un foglio di stile CSS.

5 Ora abbiamo il carattere collegato al nostro sito web. Dobbiamo impostare uno dei nostri attributi di stile in modo che possiamo effettivamente utilizzare il carattere. È semplice come dichiarare la famiglia di caratteri ma usando il nome del nuovo carattere. Ricorda di utilizzare un carattere fall-back sicuro per il web.

6 Eccolo in azione.

7 Per collegare più famiglie di caratteri, seleziona "Aggiungi alla raccolta" sui tipi di carattere che desideri, invece dell'opzione Uso rapido.

8 Puoi farlo per tutti i tipi di carattere che vuoi; tuttavia, ricorda che questo potrebbe aumentare il tempo di caricamento della pagina. Quando hai tutti i font che desideri, seleziona Uso in basso a destra del sito web.

9 Riceverete di nuovo il codice, ma questa volta tutti i font verranno combinati in un'unica istruzione di collegamento. Inserisci il codice nell'intestazione e adatta il contenuto allo stesso modo del passaggio 4.