Supporto volontario e collaborativo per Joomla!® in italiano

Come incorporare un font specifico su un sito Joomla!

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Ci sono dei scenari in cui il web designer, a richiesta specifica dell'utente, deve utilizzare dei caratteri specifici (webfont) nella creazione di un sito web, caratteri che in modo predefinito non sono visualizzabili.
Per superare questa limitazione uno dei metodi più comuni è di utilizzare la proprietà "font-face" del CSS3 o utilizzare Google Web Fonts. In questa mini-guida vediamo come implementare questa funzionalità utilizzando la direttiva @font-face. Ho utilizzato come esempio la versione più recente di joomla 2.5.14 con il template predefinito beez 2.

1. Preparare il font in locale.

a). Scaricare il font desiderato nel formato .otf o .ttf (attenzione alla licenza d'uso).
Prendiamo un esempio con il font "Bebas Neue", un ottimo font da utilizzare specialmente nei titoli H1. Scarichiamo il ZIP e troviamo all'interno un file nel formato OTF (bebasneue.otf). (Esempio: http://www.dafont.com/)

b). Convertire i file .otf o .ttf in webfonts con l'utilizzo dei vari converter online
  • http://www.font2web.com/
  • http://www.fontsquirrel.com/tools/webfont-generator
  • http://convertfonts.com/

c). Creare una cartella 'fonts' nella root del template predefinito (se non c'è).

d). Copiare i 4 font convertiti (.eot, .woff, .ttf, .svg) nella cartella 'fonts' (bebasneue.eot, bebasneue.svg, bebasneue.ttf e bebasneue.woff);

e). Incorporare e utilizzare questi font, ma fate attenzione di cambiare il nome del font con quello che utilizzate.


2. Utilizzare il font dalla cartella "fonts"

Inserire nel file CSS del template, la seguente proprietà:
@font-face {
   font-family: 'BebasNeueRegular';
   src: url('../fonts/bebasneue.eot');
   src: url('../fonts/bebasneue.eot') format('embedded-opentype'),
   url('../fonts/bebasneue.woff') format('woff'),
   url('../fonts/bebasneue.ttf') format('truetype'),
   url('../fonts/bebasneue.svg#BebasNeueRegular') format('svg');}

Adesso se vogliamo utilizzare quel font nei tag (tutti) H2, nel nostro file CSS inseriamo un'istruzione del genere:
h2{
   font: 24px/27px 'BebasNeueRegular', Arial, sans-serif!important;}

Se vogliamo utilizzarlo invece solo in alcuni tag H2 allora dobbiamo creare una classe specifica del tipo:
h2.classeottanta{
   font: 24px/27px 'BebasNeueRegular', Arial, sans-serif!important;}


NOTA: Fate attenzione nell'utilizzo dei font. Questi rallentano il caricamento delle pagini web. Di conseguenza vi consiglio di utilizzare solo il minimo necessario di questi font non-tradizionali !

Buon CSS a tutti !

CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.8.1 Stabile Italiana
Data di rilascio: 04 Ottobre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: