Fonts Google nel template

Details

Category: Labs

La directory Google Font è uno degli sviluppi più eccitanti nella tipografia web degli ultimi tempi. Le Font di Google permettono agli sviluppatori sia di blog, siti web e semplici utenti di poter utilizzare caratteri esotici nel nostro Template Joomla.

In precedenza era possibile utilizzare una manciata di caratteri esotici nei i nostri template, ma ciò era possibile affidandosi a numerose righe di codice JavaScript che procurava un enorme e pesante fardello per la nostra larghezza di banda e incidevano pesantementesui tempi di caricamento della pagina stessa. Ma ecco che il servizio offerto da Google è arrivato in nostro aiuto e con Google Font ci ha salvato ancora una volta.

Analizziamo adesso come inserire manualmente Google Fonts nel nostro Template Joomla!

• Prima di tutto dovremo visitare la Directory di Google Font e trovare il font che vi interessa usare.
• Una volta trovato il font che si desidera utilizzare cliccare sul link a destra del carattere che afferma: Quick-use. In questo modo si espande la selezione del carattere e si visualizza il codice che sarà necessario aggiungere al nostro template.
• Scorriamo la pagina fino a quando tra i tags non si trovano i riferimenti ai Cascading Style Sheet (CSS) e aggiungiamo il codice come mostrato nell'esempio seguente:

• Trovare la directory del template corrente in uso.
• Trovare il file index.php e aprirlo con un editor html
• Nel file index.php passare alla parte del file in cui è incluso il file CSS del template. Sotto il riferimento al file CSS aggiungere il nuovo riferimento alle Font Google. Il vostro codice, infine, dovrebbe essere simile a questo:

link re="stylesheet" href="/baseurl ?>
/templates/system/css/system.css" type="text/css" />

• Fatto questo il nostro ultimo passo è ora quello di determinare a quale elemento HTML vogliamo assegnare al nostro font di Google. Per esempio si potrebbe voler assegnare il nuovo Font Google per l'elemento h1. Per fare questo aprire il documento css del template di solito template_css.css oppure style.css.
• Vediamo come utilizzare il nuovo font con l'elemento h1. Creare una nuova regola CSS e aggiungere questo codice alla fine del file style.css:

h1 {
font-family: ‘Gentium Basic’, serif;
}

• Questo è tutto. Ora non vi resta che caricare i file modificati sul tuo host web affinché le modifiche abbiano effetto.

Analizziamo adesso come inserire automaticamente Google Fonts

Se non abbiamo dimestichezza coi codici sorgenti possiamo affidarci a strumenti che effettuino automaticamente questi passi e uno degli strumenti più utilizzati e senza dubbio l'uso di un content plugin specifico per questo lavoro.

La cosa grandiosa di utilizzare Joomla è che ci sono quasi sempre i plugin disponibili per qualsiasi attività che si desidera raggiungere. Quindi se non vogliamo far danni da soli si può sempre scaricare e installare uno dei plugin disponibili per aggiungere il codice di Google Font per voi.

greHD-Gfonts (Compatibilità Joomla 1,5 -1,7 - 2,5) HD-Gfonts è un semplice plugin che permette di sostituire i caratteri standard del vostro template con una più ampia gamma di font dalla directory di Google Font dove ci sono attualmente più di 250 caratteri.

• < Prev
• Next >