Installare un font in un sito Joomla

Installare un font in un sito Joomla

Può sembrare banale, eppure la scelta del font da utilizzare in un sito può fare la differenza.

Un carattere leggibile e stilisticamente accattivante può rendere più piacevole la navigazione degli utenti, facendoli tornare sul sito una seconda volta.

Personalmente è una cosa a cui tengo molto.

Se il sito si legge poco e male, sarà difficile che io torni una seconda volta, sebbene i suoi contenuti siano utili!

Installare un font in Joomla

Tutti noi abbiamo i nostri "font" preferiti, inutile nasconderlo, e ci piacerebbe inserirli anche all'interno dei nostri siti web. Come fare? Con Joomla l'operazione è molto semplice e ci permette ancora una volta di apprezzare la flessibilità del software e il suo alto grado di personalizzazione.

Vediamo come.

Attenzione: la guida è dedicata alla versioni 3.X di Joomla

1. Scegliamo il font e facciamo il download

Esistono moltissimi siti web che permettono il download gratuito di migliaia di font. Alcuni esempi:

Facciamo però attenzione alla licenza d'uso: alcuni font potrebbero non essere disponibili per l'uso commerciale, mentre altri (a pagamento) potrebbero essere disponibili unicamente per l'utilizzo privato.

In questo esempio scegliamo di scaricare dal sito dafont.com il font "Aubrey" (che, come si vede dalla schermata, è totalmente gratuito)

 

aubreyfont

2. Convertiamo i files

Nella cartella zippata che abbiamo appena scaricato, troveremo dei files con estensione .otf oppure .ttf, magari assieme ad altri files (che per il momento non ci interessano)

Queste estensioni vanno benissimo per installare un font all'interno del nostro computer (magari per utilizzarlo in Word o Photoshop), ma se vogliamo utilizzarlo in un sito web?

Dovremo convertirli. Come? Semplice, utilizzando uno di questi tool gratuiti:

Queste risorse faranno in modo che dai files del font originale vengano estratti 4 altri files, con estensioni eot, otf, woff, ttf, svg

Quindi:

  • utilizziamo uno dei tool citati per caricare i files originali
  • scegliamo di convertirli per il web
  • scarichiamo il pacchetto zippato con i nostri bei files, pronti per essere usati!

Consiglio: spesso questi files, una volta scaricati, hanno dei nomi complessi e lunghi. Il mio consiglio è quello di rinominarli in modo più semplice.

Ad esempio, in questo caso ho scelto di rinominarli in "aubrey.eot", "aubrey.otf" etc etc...

3. Inseriamo questi files in una directory via FTP

Dobbiamo inserire questi files in una directory.

Ci aiuteremo con un client FTP, ad esempio Filezilla.

Entriamo nella cartella del nostro template: Supponiamo che il template si chiami pincopallino, il percorso sarà

www.sitoweb.com/templates/pincopallino/fonts

Alcuni temi già possiedono questa cartella, meglio così.

Se la cartella non è presente, creala. Inserisci qui i files prodotti dalla conversione.

4. Modifica il file CSS

Ora dobbiamo fare in modo che il nostro file css richiami quei font.

All'interno del file CSS del template (o, ancora meglio, nel nostro file custom.css) inserisci un codice come questo

@font-face {
   font-family: 'Aubrey';
   src: url('../fonts/aubrey.eot');
   src: url('/../fonts/aubrey.eot') format('embedded-opentype'),
   url('../fonts/aubrey.woff') format('woff'),
   url('../fonts/aubrey.ttf') format('truetype'),
   url('../fonts/aubrey.svg#Aubrey') format('svg');}


Ora facciamo attenzione.

Il nome del font (quello richiamato dal comando "font-family") deve essere scritto nella stessa maniera in cui poi andremo a scriverlo per poterlo utilizzare. Quindi scegliamo un nome semplice, senza spazi.

esempiofont1

Nell'immagine qui sopra ho usato Firebug per vedere che il mio tema utilizzava il font "Lato" come font predefinito.

Lo vedo perché è così che viene dichiarato nel file "template.css" alla riga 69.

Quindi, ora dovrò entrare sempre via FTP nel file template.css, andare alla riga 69, e sostituire il nome "Lato" con il nome "Aubrey" in questo modo.

font-family: "Aubrey", "Arial, "Helvetica", sans-serif!important;

Cosa ho fatto?

Ho detto al mio sito: invece del font "Lato" utilizza il font che ho chiamato "Aubrey", i files di questo font li trovi in queste cartelle:

   src: url('../fonts/aubrey.eot');
   src: url('../fonts/aubrey.eot') format('embedded-opentype'),
   url('../fonts/aubrey.woff') format('woff'),
   url('../fonts/aubrey.ttf') format('truetype'),
   url('../fonts/aubrey.svg#Aubrey') format('svg');}

Conclusioni

Abbiamo visto come installare un font all'interno di un sito Joomla! (ma il procedimento è pressoché lo stesso anche su altri CMS).

Il mio consiglio è utilizzare Firebug per vedere quali sono i font utilizzati in un sito.

Potrebbero anche essercene più di uno (ad esempio per i titoli, per i tag H1, H2 e così via...).

[BONUS] Installare un font di Google

In alternativa è possibile installare uno dei tanti font forniti da Google.

Li trovi qui: https://fonts.google.com/

In questo caso è ancora più semplice.

Selezioni il font che vuoi cliccando sull'iconcina rossa con il simbolo "+" accanto al nome del font, copi la stringa evidenziata come da foto qui in basso...

font google schermata

...incolli questa stringa nel file header.php (o index.php) del tuo tema, prima del tag </head>

e una volta salvata la modifica, sostituisci il nome del file a quello predefinito.

In questo caso, per esempio, scriverai

font roboto

sostituendo il nome "Roboto" al font "Lato" o "Aubrey" che dir si voglia...


Update: Ulteriori approfondimenti potete trovarli a questo link: http://www.ruggeromarzocca.it/video-tutorial/90-google-font-in-joomla

Vota:
1
 
Quasi 10 milioni gli italiani acquisteranno online...
Nasce WireBiz.it - Professional Online Network

Forse potrebbero interessarti anche questi articoli