Usare caratteri personalizzati nel proprio sito web grazie a @font-face CSS3!

Giovanni Canella

04/10/2013

4034

Con l'avvento della versione di CSS3 sono state introdotte diverse novità sotto vari punti di vista: dai gradienti, alle sfumature, fino alla possibilità di inserire un carattere personalizzato nella propria pagina web, per distinguersi dal solito Arial, o Verdana. In questo articolo vediamo come sfruttare questa possibilità!

La proprietà in questione si chiama @font-face. Presenta una sintassi un po' diversa rispetto alle altre proprietà CSS, infatti dovremo specificare non un solo tipo di font, ma bensì 5 formati diversi:

  1. WOFF (Web Open Font Format) Supportato da Google Chrome, Firefox, Opera, Safari, Internet Explorer (>= 9)
  2. TTF (True Type Fonts), Supportato da Google Chrome, Firefox, Opera, Safari
  3. OTF (OpenType Fonts) Supportato da Google Chrome, Firefox, Opera, Safari
  4. SVG (Standard Vector Graphics) Supportato da Google Chrome, Opera, Safari
  5. EOT (Embedded OpenType). Supportato da Internet Explorer

Usare caratteri personalizzati nel proprio sito web!

Questo per garantire una maggiore compatibilità e uniformità nella visualizzazione della pagina in tutti i principali browser. Per la scelta del font possiamo andare su vari siti che ci mettono a disposizione una raccolta con anche migliaia di voci con relatie categorie! Tanto per citarne alcuni:

Una volta scelto quello che ci aggrada di più procediamo all'integrazione: come detto prima dobbiamo assicurarci di includere 5 formati di quel font, che raremente ci sono nel pacchetto che scarichiamo, e in questi casi come fare?

Semplice! Ci sono dei convertitori online come anche quello presente su Font Squirrel, dove non dobbiamo fare altro che selezionare il singolo formato di cui disponiamo, accettare la licenza confermando che il font che utilizzeremo sarà legalmente ammissibile per l'incorporamento nelle pagine web. Successivamente cliccando su "Download your kit" potremo scaricare il pacchetto che dovrebbe contenere il seguente contenuto (ovviamente in base al vostro carattere):

Esempio pacchetto con i 5 formati di font

CSS

Per quanto riguarda il codice CSS, ecco le linee di codice per integrarlo in modo semplice e pulito (nel mio caso ho scelto il font Bebas Neue). Se avete usato il convertitore precedentemente illustrato, possiamo semplicemente includere il fie "stylesheet.css" nel nostro documento, altrimenti il seguente pezzo di codice.

@font-face {
	font-family: "bebas_neueregular";
	src: url("font/bebasneue-webfont.eot");
	src: url("font/bebasneue-webfont.eot?#iefix") format("embedded-opentype"),
		url("font/bebasneue-webfont.woff") format("woff"),
		url("font/bebasneue-webfont.ttf") format("truetype"),
		url("font/bebasneue-webfont.svg#bebas_neueregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

Il nome da inserire in font-family: è il nome del font in minuscolo, separato da un underscore se ha eventuali spazi, seguito alla fine da regular, per quanto riguarda lo strumento utilizzato, altrimenti se possediamo già i vari formati inseriamo semplicemente il nome di quest'ultimo: es

font-family: "Bebas Neue";

Ora spostiamoci all'interno del selettore html, in modo da impostare il carattere appena caricato per tutti gli elementi e procediamo all'inserimento in questo modo:

html {
	font-family: "bebas_neueregular", Arial, sans-serif;
	margin: 0;
}

Affianco a "bebas_neueregular" ho inserito anche altri caratteri come Arial e sans-serif per fare in modo che se qualcosa dovesse andare nel caricamento di quello personalizzato esso viene rimpiazzato da quello successivo.  Proviamo quindi a scrivere una breve frase...

<h1>Ciao</h1>
<hr>
<h2>io sono un testo con un carattere diverso dal solito :D</h2>

... e visualizziamo il risultato:

Esempio con caratter @font-face:

Decisamente di un altro impatto rispetto a un normale "Arial":

Esempio testo con il classico Arial

N.B = Questa proprietà non è compatbile con le versioni di Internet Explorer inferiori alla 9, ma è un problema relativo, dato che ormai è utilizzato solo dall'8% degli utenti. Bisogna rinunciare la vecchio per utilizzare le potenzialità del nuovo!

I più letti

Ti potrebbero interessare