Come personalizzare i caratteri di un blog su Blogger con @font-face.

Come personalizzare i caratteri di un blog su Blogger usando una famiglia di caratteri scaricata da internet.

La piattaforma Blogger offre diverse opzioni di scelta per quella che viene definita la famiglia di caratteri. Con la nuova Bacheca si va su Modello > Personalizza > Avanzato e, per ogni elemento del blog (Nome, Descrizione, Titolo del post, Data, Titolo del gadget, Testo del gadget, ecc), si può selezionare la famiglia di font da utilizzare ricordandoci di dare un'occhiata alla Anteprima in basso e di cliccare su Applica al blog in alto a destra

Oltre al tipo di caratteri, si possono configurare molti altri parametri tra cui la dimensione e i colori del testo e dello sfondo. Dopo aver pubblicato migliaia di post e aver ricevuto decine di migliaia di commenti mi sono accorto che c'è sempre qualcuno/a che non si accontenta delle pur numerosissime opzioni.

 Ci sono quelli che vogliono una grafica assolutamente originale e di conseguenza anche dei font personalizzati per dare ancora più originalità al loro sito. Questo post si rivolge appunto a coloro che vogliono pubblicare i loro articoli con caratteri non supportati da Blogger.

Altri caratteri di Google e non solo

Anche quelli di Google sono consapevoli di queste richieste e allora qualche mese fa hanno reso disponibili una serie di font alternativi. Ecco due articoli in cui si illustrano i procedimenti per utilizzare questi font

1. Pubblicare con i nuovi caratteri di Google -
2. Usare caratteri originali per il blog -

Riepilogando brevemente il meccanismo, si deve accedere a Google Webfonts, si sceglie la famiglia di caratteri che ci piace. Si clicca su Quick-use

Si seleziona e si copia il codice visualizzato nel punto 3) e si incolla nel modello subito sopra alla riga </head>

successivamente si cerca nel modello il tag font-family e si aggiunge il nome della famiglia prescelta. Per esempio

font-family: 'Cookie', cursive;

Nel caso in cui questo tag non fosse presente si cerca la riga

body {

e, all'interno del blocco di codice successivo, si incolla la riga

font-family: 'Cookie', cursive !important;

Naturalmente il nome in rosso del font serve solo come esempio. Se anche tra tutti i font di Google non ce n'è nessuno di nostro gradimento allora bisogna rivolgersi a @font-face che è una metodologia in grado di inserire ulteriori font presenti sul web.

Come personalizzare i caratteri del blog con @font-face

La prima cosa da fare è quella di cercare questi caratteri. Ci sono nel web moltissimi siti che li offrono anche gratuitamente per usi non commerciali e anche commerciali. Ne ho già parlato nell'articolo in cui ho elencato 10 siti in cui scaricare gratis i font. Due altre opzioni gratuite molto interessante sono rappresentate da Font Squirrel e Fontex. Se anche in questi siti non trovate nulla che vi piace allora siete un caso patologico, non sarete mai soddisfatti di niente e evitate di leggere il seguito dell'articolo.

Ci sono due problemi da affrontare per personalizzare i caratteri del blog con i font scaricati da questi siti. Il primo è quello di caricarli su Blogger e il secondo è quello di fare in modo che siano visibili da tutti i più importanti browser. Se mi seguite da un po' di tempo saprete che proprio questo secondo problema è una cosa abituale e piuttosto frustrante. Per ogni font viene offerto un link di download. Il file scaricato è in genere in formato ZIP che dovrà essere scompattato con 7-ZIP o software analogo. All'interno solitamente c'è un solo file in formato TTF (True Type Fonts).

La cosa che sa un po' di ridicolo è che

1. Internet Explorer supporta solo i file in formato EOT
2. Firefox supporta i file in formato OTF e TTF
3. Safari e Opera supportano i file in formato OTF, TTF e SVG
4. Chrome supporta i file in formato TTF e SVG   

Quindi se per esempio scarichiamo un file di caratteri in formato TTF dobbiamo convertirlo per creare altri file nei formati EOT, OTF e SVG. Alla fine ci troveremo quindi con quattro file da caricare nel modello. Per fortuna esiste il tool @Font-Face Generator che agevola di molto il lavoro. Si tratta di caricare il file di font in uno qualsiasi dei formati appena elencati, cliccando sul bottone Add Fonts 

Dopo aver atteso la fine dell'upload, si mette la spunta alla dichiarazione che siamo consapevoli che il tipo di carattere è libero da copyright, quindi si clicca su Download Your Kit per scaricare un archivio in ZIP con tutto quello che ci occorre. Dopo aver scompattato lo ZIP con 7-ZIP o analogo, avremo una cartella nominata webfontkit-xxxxxxxx-yyyyyyyy che conterrà diversi elementi. Ecco uno screenshot fatto con Windows 7

L'aspetto delle icone dei file dipenderà dai programmi predefiniti usati per aprirli. Facendo doppio click sul file HTML si può notare che si tratta di una demo dell'aspetto dei font che si aprirà come scheda del browser. Oltre a questo file HTML, alla cartella specimen_files e al file di testo generator_config che non starò a trattare, ci saranno anche i quattro formati che ci interessano cioè WOFF, TTF, SVG e EOT.

Molto utile è il file CSS che può essere aperto con un doppio click nel caso si abbia nel computer un programma in grado di aprirlo. Se la sua icona non riporta a nessun programma predefinito può essere aperto con Notepad++ che consiglio a tutti di installare nel computer. Vedremo che il CSS avrà questa forma

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

dove le parti colorate dipenderanno dal nome del font che abbiamo scaricato. Il nome effettivo della famiglia dei caratteri è quello colorato di viola. Adesso dobbiamo caricare su DropBox i quattro file dei font. Possiamo prima copiarli in una cartella con il nome del carattere e poi trascinarla con il mouse nella cartella Public di DropBox. In questo modo potremmo ottenere il link diretto a ciascuno di essi. Come certo saprete bisogna aprire il menù contestuale pigiando sul destro del mouse e poi scegliere DropBox > Copy public link

Questi link dovranno essere sostituiti al posto degli URL nel codice precedente per ottenere una cosa simile a questa

<style>
@font-face {
    font-family: 'SigmarRegular';
    src: url('http://dl.dropbox.com/u/2574553/sigmar/sigmarone-webfont.eot');
    src: url('http://dl.dropbox.com/u/2574553/sigmar/sigmarone-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://dl.dropbox.com/u/2574553/sigmar/sigmarone-webfont.woff') format('woff'),
         url('http://dl.dropbox.com/u/2574553/sigmar/sigmarone-webfont.ttf') format('truetype'),
         url('http://dl.dropbox.com/u/2574553/sigmar/sigmarone-webfont.svg#SigmarRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
font-family: SigmarRegular !important;
} </style>

Sono da notare alcune cose importanti:

1. L'URL file in formato EOT va aggiunto due volte
2. Ho inserito all'inizio e alla fine i due tag <style> e </style> per facilitare l'inserimento del codice nel modello
3. Ho aggiunto un blocco di codice colorato di verde per fare in modo che il blog abbia quel determinato font (colorato di rosso) in tutti i post.

Si va adesso su Modello > Modifica HTML > Procedi, si cerca la riga </head> e si incolla subito sopra. Si salva il template. Il blog avrà adesso i caratteri che avete scelto e potranno essere visti nello stesso modo con tutti i principali browser. Nel caso vogliate mostrare solo una pagina del vostro blog con caratteri diversi, basta inserire due tag personalizzati all'inizio e alla fine del codice con questa sintassi

<b:if cond='data:blog.url == "URL DEL POST O DELLA PAGINA"'>
<style>
@font-face {
........

</style> </b:if>

E' quello che ho fatto anche io per testare questa funzionalità. Nella homepage di questo blog ci sono i font ufficiali di Blogger mentre ho creato tre demo

• Post di Demo dei caratteri Sigmar Regular -
• Post di Demo dei caratteri Special Elite Regular -
• Post di Demo dei caratteri Chemist Font -

Potete controllare come i font siano visibili nello stesso modo con tutti i browser e come anche i commenti e le altre scritte abbiano gli stessi caratteri. Per personalizzare gli altri font oltre a quelli del corpo dell'articolo occorre inserire prima di </style> dei blocchi di codice come questo

h3.post-title, h4 {
font-family: SigmarRegular !important;
}
h3.post-title a {
font-family:SigmarRegular !important;
}
h3.post-title a:hover {
font-family:SigmarRegular !important;
}

Il CSS precedente serve in particolare per visualizzare con gli stessi font del testo anche il titolo del post, il testo dei commenti oltre ai link.