Salta al contenuto principale

Come usare un font non standard sul sito web?

Argomento

Come usare un font non standard sul sito web?

Google Web Fonts è un servizio che permette ci permette di consultare e scaricare numerosi font offrendoci anche la possibilità di inserirli liberamente sul nostro sito web.

Andiamo a questo indirizzo http://www.google.com/webfonts e individuiamo innanzitutto il font che vogliamo utilizzare ad esempio Kotta One

Nel foglio di stile CSS aggiungiamo la seguente riga:

@import "http://fonts.googleapis.com/css?family=Kotta One";

Se vogliamo utilizzare più stili occorre separare i nomi con il carattere |

 

@import "http://fonts.googleapis.com/css?family=Kotta One|Capriola";

Per associare il font ad esempio al titolo 1 (H1) scriviamo la regola:

h1 {
    font:"Kotta One";
}

Se il font non fosse disponibile possiamo inserire anche font alternativi

h1 {
    font:"Kotta One", Arial, Helvetica, sans-serif;
}

una volta caricato il file css sul nostro sito, basterà ricaricare la pagina per vedere il risultato.

 

Per Drupal

Con Drupal abbiamo a disposizione il modulo @font-your-face che ci consente di scegliere i font tra i provider

I font vengono caricati con un semplice click ed associati ai principali tag HTML. Inoltre è possibile caricare font nei formati EOT, TTF, WOFF and SVG.