• Home »
  • CSS »
  • Creare testi con caratteri personalizzati nel sito con i CSS

Creare testi con caratteri personalizzati nel sito con i CSS

Un altra funzione utilissima disponibile in CSS3 è quella di poter facilmente implementare nuovi caratteri nel proprio sito ed utilizzarli al posto dei soliti: Arial, Verdana, Georgia, e via dicendo. Questa tecnica in passato richiedeva l’ausilio di immagini. Ma vediamo come fare con un semplice esempio pratico:

Per prima cosa bisogna caricare con un programma FTP il file del carattere che si vuole utilizzare, quindi un  font in formato “.ttf” oppure “.otf”, come esempio useremo “Redressed-webfont.ttf”.

Solitamente è consigliato caricare anche lo stesso file con le estensioni “.eot”, “.woff” e “.svg” questo per ragioni di compatibilità con altri dispositivi come gli smartphone. In caso non siano disponibili gli altri formati si possono generare qui

Poi possiamo implementare il carattere nel CSS con @font-face, cosi:

@font-face {
 font-family: 'redressedregular'; /* assegniamo un nome al carattere */
 src: url('Redressed-webfont.eot'); /* implementiamo il font */
 src: url('Redressed-webfont.eot?#iefix') format('embedded-opentype'),
 url('Redressed-webfont.woff') format('woff'),
 url('Redressed-webfont.ttf') format('truetype'),
 url('Redressed-webfont.svg#redressedregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

Fatto questo, per utilizzare il carattere basterà richiamarlo in questo modo:

.test
{ 
font-family: redressedregular, Arial;
}

Inserendo altri caratteri dopo la virgola possiamo dare al browser delle alternative da utilizzare in caso che il carattere non sia supportato.

Clicca qui per vedere l’esempio

Una valida alternativa a questa procedura sono i Google Fonts, che si possono integrare nella pagina web in modo ancora piu semplice e senza bisogno di scaricare il carattere.

Compatibilità:

browser_ie browser_firefox browser_chrome browser_opera browser_safari

Hai delle idee o dei suggerimenti per migliorare questo articolo? Lascia un commento qui sotto!

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website