Translate

itzh-CNenfrdejakoptrues

Come inserire un font personalizzato su un sito Joomla! Font-face e altro

Ci sono degli 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 (a fine articolo). In questa mini-guida vediamo come implementare questa funzionalità utilizzando la direttiva @font-face. Ho utilizzato come esempio la versione più recente, al momento, 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
poi fate l'upload del vostro Font, generate il Font ed il gioco e fatto. Vi compariranno ben 4 voci con la relativa estensione.
 
font finder
 
Queste sono tutte le estensioni che vi servono.
 
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.

 

bebasscreenshot1

 

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');}
Assicuratevi che il nome corrisponda esattamente a quello dei 4 file generati, attenzione perché è case-sensitive, ovvero riconosce maiuscole e minuscole!
 
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 !

 


 web fonts  WEB FONTS

Web Fonts è un componente e plugin che permette ai web designer di Joomla ! di integrare facilmente sui caratteri. L'estensione sfoglia , seleziona e importa i font forniti da servizi di terze parti .

Guardalo in azione su YouTube :

Attualmente , sia il servizio Google Web Fonts e il servizio Fonts.com sono integrati (oltre 16.800 caratteri fra gratuiti e commerciali).

Inoltre i font disponibili hanno una vasta gamma di set di caratteri ( Khmer , giapponese, arabo , cirillico , greco , ecc ecc )

Importante : Sia il componente che il plugin devono essere installati e abilitati . L'interfaccia di estensione sul lato amministratore supporta IE9 e IE8 e le versioni correnti di Fire Fox , Chrome, Safari e Opera. I font sono tutti gestiti attraverso l'interfaccia del componente , tuttavia gli utenti devono avere almeno una conoscenza di base delle regole CSS .

DOWNLOAD


 hyde design  HD-GFONTS

Una terza (e ottima) possibilità è quella di usare il Plugin HD-GFONTS.

Lo trovate qui: HD-GFONTS

HD-GFONTS permette di creare 5 stili nuovi sia per "selettori" che per "classi" di CSS usando i fonts che possiamo trova nel Sito Web di Google, e dopo vedremo come si fa..

Una volta scaricato ed installato lo dobbiamo attivare come mostrato nell'immagine qui sotto.

Snap 2013 02 18 at 11.53.59 fffc6

a questo punto però, prima di creare i nostri nuovi stili, occorre conoscere quali Fonts poter usare e qui ci viene in aiuto Google, recandoci a questo link: http://www.google.com/webfonts potremmo selezionare lo stile preferito: SANS SERIF, SERIF, etc.. etc come possiamo vedere nell'immagine qui sotto:

Snap 2013 02 18 at 11.53.12 f8bce

Una volta scelta la famiglia di Fonts da usare siamo pronti per impostare il nostro Plugin, come, ad esempio, possiamo vedere nell'immagine qui sotto:

Snap 2013 02 18 at 11.54.30 6935b

Una volta salvate le nostre personali impostazioni (notare le personalizzazioni CSS in dimensione) potremmo ammrare immediatamente l'effetto con un refresh sulla nostra pagina Web.

Snap 2013 02 18 at 11.59.12 853a8 

Ed ecco in azione il Fonts Fugaz-One!