Utilizzare i Google Web Fonts nelle vostre pagine web

inserito nella categorie: CSS

marchiato con i tag: css, css3, design, font, font-face, font-family, google

Durante la creazione di un interfaccia grafica per un sito web, viene prima o poi il momento di scegliere il font da usare, e iniziano a nascere i primi problemi.
Se decidete di usare un font “normale”, come serif o sans-serif, o come gli onnipresenti Arial, Tahoma, Times, Verdana, ecc… non avrete problemi: ma per avere un impatto visivo maggiore, potreste decidere di usare dei font su misura, ma sapete benissimo (spero) che un determinato font viene visualizzato in una pagine web se e solo se esso risulta installato sulla macchina client… come ovviare a questo problema?
Vi viene in aiuto una nuovissima proprietà introdotta nello standard CSS3, la @font-face, che permette ai grafici di tutto il mondo di utilizzare font proprietari non necessariamente installati sulle macchine client.
Ma veniamo al dunque.. cosa sono i Google Web Fonts?.
Semplicemente Google ha messo a disposizione una lista di font completamente open-source, che voi potete utilizzare nelle vostre pagine web, in maniera semplicissima e veloce.. vediamo come.
Innanzitutto recatevi sulla Google Web Fonts Directory e scegliete il vostro font
Ora avete tante opzioni a disposizione, quali effettuare il download del font, vederne un anteprima, visulizzare il set dei caratteri, oppure Usare il font.
Mettiamo caso che abbiate scelto il font Lora; per usarlo nel vostro sito, vi basta fare due semplici cose.
Importare il file .css messo a disposizione da Google che utilizza la proprietà @font-face per effettuare il rendering del font nel vostro foglio di stile, con questa regoletta:

@import url("http://fonts.googleapis.com/css?family=Lora:regular,bold,italic");

Quindi impostare la proprietà nella regola css:

body {
   font-family: "Lora", sans-serif;
}