I due tipi di caratteri più popolari ed utilizzati sul web , ad oggi , sono sicuramente Helvetica e Georgia. Vengono principalmente usate in quanto sostituiscono varie tecniche flash o javascript, anche se grazie a css3 possiamo contare sul @font-face. La proprietà font-face non funziona su tutti i browser , ma sicuramente è una delle migliori soluzioni disponibili al momento. @font-face ci permette di richiamare un determinato font installato sul nostro webserver e permetterne la visualizzazione online , tralasciando i soliti arial e verdana, e passando a delle alternative che fino a qualche anno fa potevamo sfruttare solo con immagini o flash e js.

Prima di poter utilizzare font-face dovrete dichiare l’indirizzo del vostro font nel css insieme a font-weight e font-style. Un esempio di seguito :

@font-face {
font-family: GraublauWeb;
src: url(“path-to-the-font-file/GraublauWeb.otf”) format(“opentype”);
}

@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url(“path-to-the-font-file/GraublauWebBold.otf”) format(“opentype”);
}

E di seguito vi presento una lista di font che potrete utilizzare con questa proprietà css :

via | Spyrestudios