Dec
24
Come usare i font scaricati all’interno delle pagine web usando i css
Oggi parliamo di web design e di design tipografico. Da poco mi sono documentato circa l’inclusione delle font utente (dette “custom”) all’interno della pagina web. Fin’ora per la pagina web, il webdesigner ha sempre dovuto usare le font di sistema (arial, verdana, courier new, times, ecc.), o creare delle immagini apposite per i titoli, o nei casi più eclatanti (con grande dispendio di energie) sostituendo ogni lettera con l’immagine corrispondente alla font custom tramite javascript.
Per la gioia di tutti i web designer oggi è possibile importare il file della font dal CSS all’interno della pagina web, in modo che l’utente visualizzi il carattere custom, senza doversi scaricare la font.
Ovviamente la font utilizzata dovrà essere libera da vincoli legali se non vogliamo correre il rischio che l’utente utilizzi la nostra custom font per i suoi fini senza permessi.
Le righe di codice CSS sono veramente poche. Vediamole:
@font-face {
font-family:"LaMiaFont";
src:url(LaMiaFont.ttf) format("truetype");
}
Queste righe di codice importano la font all’interno del CSS, mentre con le seguenti, specifichiamo dove usare la nostra custom font.
h1 {
font-family:LaMiaFont;
}
L’immagine che segue è lo screenshot effettuato dopo l’ausilio di questa tecnica con poche differenze in più. Il titolo è colorato in rosso, con un’ombreggiatura grigia, inoltre ho tolto il grassetto dal titolo (h1) tramite la riga “font-weight:normal”. Ho volutamente evidenziato parte del testo per dimostrare che il titolo non è una immagine, ma è proprio una font inclusa con questa tecnica.
