Come utilizzare font non standard nel proprio sito.

In ogni sistema operativo  sia esso Windows, Mac o Linux sono installati dei font, questi font sono detti “Safe font” e se utilizzati nella progettazione di siti web vengono visualizzati senza problemi proprio perchè presenti in ogni sistema operativo, tra i più comuni e famosi ci sono: Arial, Times New roman, Georgia, Tahoma, Courier, Geneva, Helvetica, una lista più completa è presenta sul sito Font Tester

Il problema sorge quando esiste la necessità di usare in un progetto web font che invece non fanno parte di questa categoria.

Questo problema può essere risolto in diverse maniere, in questo articolo alcuni tra i metodi più usati.

1. Cufon

Cufon è un servizio che permette di incorporare qualsiasi font in una pagina web tramite JavaScript.

I passaggi per l’installazione di Cufon su una pagina web non sono così immediati, qui di seguito un video tutorial su come utilizzare questo servizio.
Cufon esiste anche come plugin per WordPress

2. @Font face

Font face è una proprietà CSS che permette di implementare font non standard tramite l’inserimento nel foglio di stile di una regola così strutturata:

@font-face { font-family: Delicious; 
                     font-weight: bold; 
                     src: url('.../Delicious-Bold.otf'); 
}

per poi richiamare il font dove preferisci per esempio.

h1 { font-family: Delicious, sans-serif; }

Usare @Font face è molto più semplice rispetto a Cufon, ma ha il limite di non essere supportao completamente da tutti i browser, specialmente quelli più datati.

Per tenere constantemente monitorato l’evoluzione delle specifiche CSS rispetto ai browser ti consiglio di consultare ogni tanto il sito findmeby ip

Il sito Font squirrel mette a disposizione un utile tool chiamato, Fontface Kit Generator, per creare tutto ciò che serve per implementare un font a scelta in una pagina web tramite la proprietà @font-face, sotto i passaggi da seguire:

1. Andate all’ indirizzo Font face generator

2. Caricate il vostro font utilizzando il form automatico che trovate nella pagina, e decidete se scegliere l’opzione semplice o avanzata in cui compariranno diversi parametri di scelta.

3. Verrà scaricata una cartella nella quale troverete diversi file tra i quali una pagina demo.html e una stylesheet.css, aprite con un editor di testo o HTML la pagina demo.html e se avete seguito il tutorial precedente su come installare Cufon dovreste cominciare a capire qualcosa anche su come utilizzare Font face, il principio rimane lo stesso, a voi la sperimentazione.

3. Google font Directory

Google Font directory è uno degli ultimi servizi che mette a disposizione il famoso motore di ricerca, consiste in una libreria di font ospitati direttamente su Googlequindi per installarli su una pagina web sarà necessario solamente copiare e incollare un determinato codice HTML  e uno CSS, il progetto è ancora in fase di sviluppo e per ora la possibilità di scelta è poco vasta.

Vantaggi rispetto a cufon e font face:

Come installare un font

1. Dalla prima pagina di Google font directory scegliamo il font che vogliamo installare, facciamo l’ esempio di Cardo by David perry.

2  Nella pagina successiva cliccate su“Get the code”.

3. Copiamo la prima linea di codice e la incolliamola in una nuova pagina HTML.

 <link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'></link>

4. Copiate la seconda linea di codice, creiamo una pagina stylesheet.css e incolliamoci il codice copiato prima

 h1 { font-family: 'Cardo', arial, serif; }

A questo punto tutto il testo che verrà scritto all’ interno del tag h1 sarà visualizzato con il font Cardo.

Conclusioni

Utilizzare font non standard tramite uno dei metodi sopra elencati da sicuramente alla pagina web un aspetto unico, ma allo stesso tempo può rallentarne il caricamento, per questo la maggior parte dei siti web che decide di usare quetsa opzione la utilizza solamente per titoli e/o sottotitoli, brevi frasi, ma non per paragrafi di testo lunghi.

Denis Design

Pro blog design

Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

1 Risposta per Come utilizzare font non standard nel proprio sito.