Martedì, 26 Gennaio 2016 11:43

Come inserire font non standard nel vostro sito joomla!

Prima di iniziare a parlare di procedure varie ed eventuali c'è bisogno di fare una precisazione:

  • Ci sono milioni di browser a questo mondo, che girano su milioni di sistemi operativi diversi. Avere una compatibiltà al 100% con tutti è pressochè impossibile. Per fortuna i browser più usati (dal 90% della popolazione mondiale) sono i soliti noti (IE, Firefox, Chrome, Opera, Safari,..) e se riusciamo a coprire tutti questi allora siamo già praticamente a posto.

Detto questo, partiamo.

Quello di cui abbiamo bisogno è:

  • Un font-face kit
  • Un programma per trasferimenti FTP (dobbiamo cambiare alcuni file del template di joomla), tipo filezilla
  • Un editor di testo (va bene anche notepad, ma se dovete fare modifiche a righe di codice CSS/HTML/PHP il migliore in assoluto è notepad++ )

Procuriamoci il font

La prima cosa da fare è ovviamente scegliere il font che vogliamo mettere nel nostro sito. Ce ne sono migliaia a questo mondo, alcuni a pagamento, alcuni gratis. L'importante è che scegliamo un font che sia di facile lettura e che possa dare un deciso tocco stilistico al nostro lavoro.

Il sito migliore per trovare quello che ci serve è fontsquirrel .

Tra le migliaia di font disponibili scegliamo quello che ci aggrada di più. In questo esempio useremo un font calligrafico chiamato "pacifico":

  1. Clicchiamo nel menu su "webfont kit"
  2. Scegliamo il subset "italiano" (serve per avere anche le lettere accentate)
  3. Lasciamo spuntate le quattro caselle (TTF, EOT, WOFF, SVG)
  4. Clicchiamo sul tasto azzurro "Download @font-face kit"

Una volta scaricato il file zip lo scompattiamo (con winzip, winrar, o un qualsiasi altro programma che gestice gli archivi) per ritrovarci quindi con una cartella contente tutti i file necessari


Prepariamo il template di joomla uploadando i fonts

Una volta scaricato il font abbiamo bisogno di inserirlo correttamente nel nostro file template, cosa che possiamo fare modificando il nostro file css principale.

Con un programma di gestione FTP qualsiasi (consiglio caldamente Filezilla) entriamo nella root del nostro sito e navighiamo fino al nostro template.

Di solito il percorso è tipo:

nomedominio.ext/public_html/template/nome_template/

all'interno della cartella template creiamo una nuova cartella chiamata "fonts" e al suo interno mettiamo alcuni dei file che abbiamo appena scaricato, più in particolare tuti i file che non siano html, txt o css. Nel nostro caso specifico:

  • Pacifico-webfont.eot
  • Pacifico-webfont.svg
  • Pacifico-webfont.ttf
  • Pacifico-webfont.woff

Configuriamo i font nel css del template

Una volta fatto l'upload dei font possiamo tornare indietro di una cartella (tornando quindi nella directory principale del vostro template) e spostarci dentro la cartella "css".

Al suo interno troverete vari file, a seconda del template possono essecene molti o uno soltanto. Tecnicamente vanno bene tutti (si presuppone che il sito carichi tutti i file css a disposizione), ma consiglio sempre di mettere il codice nel file css principale. In genere è quello che pesa più di tutti (in termini di kb), e può avere nomi più o meno standard come:

  • template.css
  • layout.css
  • style.css

Scarichiamo quindi il file css sul computer e apriamolo con un editor di testo (notepad++ vivamente consigliato)

Ci troveremo davanti ad una sequela allucinante di righe di codice: chi ha esperienza di programmazione web sa più o meno a cosa si riferiscono, per i neofiti sappiate che queste righe definiscono il "vestito" del vostro sito.. ossia più o meno tutta la grafica che ricopre la vostra struttura joomla di base.

A questo punto, in cima aggiungiamo le seguenti righe di codice:

@font-face {
font-family: 'PacificoRegular';
src: url('../fonts/Pacifico-webfont.eot');
src: url('../fonts/Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Pacifico-webfont.woff') format('woff'),
url('../fonts/Pacifico-webfont.ttf') format('truetype'),
url('../fonts/Pacifico-webfont.svg#PacificoRegular') format('svg');
font-weight: normal;
font-style: normal;

}

Che cosa vuol dire tutto ciò?

Semplicemente stiamo insegnando al vostro sito come renderizzare e mettere a video un particolare font che non è presente tra i font standard del pc. Analizzando riga per riga vediamo che:

  • @font-face { = inizializziamo l'attributo font-face, ossia gli stiamo dicendo che le istruzioni che seguono servono a definire un nuovo tipo di font
  • font-family = è il nome con cui il sistema riconoscerà il nuovo font
  • src = tutta la sfilza di src serve per massimizzare la compatibilità di questo nostro codice, infatti ogni browser di questo mondo gestisce i font alla sua maniera poichè uno standard universale non esiste (e anche se esistesse sono sicuro che ognuno farebbe come gli pare... IE docet :P )
  • font-weight, font-style = serve per dire che il font non è ne in grassetto ne in corsivo, è un font normale

Una volta inserito il codice, la pagina dovrebbe apparire come qui

Ci siamo quasi...

Benissimo, ora abbiamo piazzato il font sul server, abbiamo detto al nostro file CSS dove andare a prendere il nuovo font, ora non ci resta che assegnare questo carattere al testo che vogliamo cambiare.

Prendiamo come esempio, il sito di pixed, nella pagina "Web": http://www.pixed.it/web.html

I titoli ("web 2.0: how to", "un sito, visto da fuori", ecc...) sono in carattere "Trebuchet MS", è giunto il momento di cambiarli per mettere qualcosa di più gioioso e solare, per esempio il Pacifico!

Le mosse da fare sono quindi queste:

  1. Tornare sul file *.css del nostro sito
  2. Trovare il punto dove vengono gestiti (nel mio caso), gli <h2>, ossia i titoli
  3. modificare il css in modo che tutti gli <h2> utilizzino il nuovo font. Come qui:

Salviamo a questo punto il file css, lo ri-uploadiamo sul server (ricordiamoci di fare SEMPRE una copia di backup dell'originale) e, se tutto è andato come doveva andare, ora il sito utilizzierà il nuovo font quando mi mostra gli <h2>

Letto 4524 volte