Inserire font in pagina web

Per inserire font esclusivi nei nostri progetti possiamo usare le regole @font-face. Queste regole fanno in modo di collegare font presenti sul nostro server e utilizzarli per stilizzare il testo sulla pagina, proprio come si collegano le immagini. La regola @font-face faceva parte di CSS2, rimossa nel CSS 2.1 e tornata in CSS3.

Fino adesso, senza i font web (i font incorporati), i web designer erano limitati alla ridotta quantita’ di font comuni presenti sui computer degli utenti. I designer che non volevano utilizzare  solo Arial, Verdana o Georgia dovevano ricorrere a immagini, Flash o script per creare il loro testo esclusivo. Utilizzando @font-face, invece, la pagina mantiene un testo reale. Il lavoro richiesto per implementare la regola @font-face puo’ limitarsi a scrivere il seguente codice nel CSS:


@font-face{

font-family: nomefont;

src: url(percorso del font/nomefont.otf);

}

Questa e’ in sintesi la regola @font-face, ma in realta’ utilizzarla e’ un po’ piu’ complicato.

SCEGLIERE FONT ACCETTABILI

Uno dei grossi problemi con i font web e’ che non tutti i font possono essere utilizzati sulle pagine web. Alcuni hanno limiti di licenza, altri non hanno un bell’aspetto per il web. Analizziamo insieme queste due problematiche.

PROBLEMI DI LICENZE

Quando si deve scegliere il font per il nostro progetto, consiglio di dare un’occhiata alla sua licenza (EULA) o alle sue condizioni di utilizzo, per scoprire se e’ consentito incorporarlo come font web. Le licenze di molti font non lo consentono, perche’ quando utilizzate @font-face, il file del font viene scaricato nella cache nel computer dell’utente, proprio come le immagini. L’utente, quindi, puo’ accedere alla sua cache e scaricarsi il font e installarlo sul suo sistema. Molti produttori di font non intendono concedere il loro prodotto a tutti quelli che visitano il nostro sito.

E’ anche vero che trovo difficile che un’utente si prenda la briga di fare tutti quei passaggi per installarsi un font, ma fortunatamente molte licenze dei font non tengono conto di @font-face, percio’ quando leggiamo la licenza di un font, potrebbe non dire niente sul divieto di incorporamento con la regola @font-face. Detto questo, se avete degli scupoli a utilizzare un font, o siete pigri nel leggere le sue licenze, ci sono molti luoghi online in cui trovare font da licenze che consentono l’incorporamento sul web:

www.theleagueofmoveabletype.com

www.fontsquirrel.com

www.kernest.com

www.fontfabric.com

www.fonthead.com

www.fontspring.com/fontface

PROBLEMI DI VISUALIZZAZIONE E LEGGIBILITA’

Dopo aver risolto il problema delle licenze, bisogna evitare di caricare le pagine di qualsiasi tipo di font bizzarro. Nello scegliere un font ci si deve assicurare che migliori la leggibilita’ del testo e non che la peggiori. Ogni volta che scegliamo di utilizzare un font web, dobbiamo avere una ragione precisa per scegliere quel determinato font, oltre al suo aspetto. Proviamo sempre i font web con il contenuto delle nostre pagine per vedere se funzionano.

Il font scelto potrebbe andare bene per i titoli grandi ma risultare troppo sottile per una corretta visualizzazione e una buona leggibilita’ del corpo del testo. Molti font commerciali non sono progettati per essere visualizzati in piccole dimensioni sullo schermo, percio’ in molti casi ha piu’ senso riservare  @font-face per titoli e continuare a utilizzare i font web-safe per il corpo del testo.

Alla prossima!

Articoli interessanti

Web Design Inspiration #046

Web Design Inspiration #046

Web Design Inspiration, una carrellata di website design originali e moderni in grado di stimolare la tua creatività per la creazione di un design usabile e coinvolgente.

Web Design Inspiration #045

Web Design Inspiration #045

Nuovo appuntamento con stimoli creativi e idee originali per la costruzione di un website unico e originale con una nuova selezione di web design inspiration.

Web Design Inspiration #044

Web Design Inspiration #044

Ispirazione e stimoli creativi che possono aiutarti a rendere più cool e originale il tuo design con una carrellata di web design inspiration.

COMMENTA

Loading Facebook Comments ...
Loading Disqus Comments ...

Lascia un commento