Come personalizzare i font di un blog anche con caratteri non di Blogger o di Google.

Come personalizzare il blog con dei caratteri o font trovati su Google Fonts, scaricati da internet o creati da noi.

Finalmente dopo due post propedeutici siamo arrivati all'articolo che forse interessa di più i blogger visto che con le conoscenze che abbiamo accumulato siamo ora in grado di avere un sito con una famiglia di font a nostra scelta e che sia visto nello stesso modo da tutti gli utenti che lo aprono a prescindere dal sistema operativo e dal browser utilizzato. Avverto subito che avere una copertura del 100% dei lettori per quello che riguarda la visualizzazione dei font personalizzati è praticamente impossibile ma credo che potremo comunque mostrare a un buon 85-90% dei navigatori il layout con i font personalizzati.

Chi abbia intenzione di continuare a leggere questo articolo è meglio che prima consulti i post su come creare una famiglia di caratteri personalizzati e su come aggiungere tali font ai caratteri del computer nel caso non lo avesse già fatto. L'obiettivo quindi è quello di avere un blog con caratteri da noi scelti anche al di fuori di quelli supportati da Blogger che si possono visualizzare andando su Modello > Personalizza e che sono comunque diverse decine. Suddividerò la trattazione in due capitoli. Nel primo prenderò in considerazione i caratteri presenti su Google Fonts che è più semplice implementare e che non hanno problemi di visualizzazione con i vari browser  mentre nel secondo capitolo prenderò in esame il caso più generale di una famiglia di font creata da noi o di cui si sia scaricato il file.

 

VISUALIZZARE IL BLOG CON I GOOGLE FONTS

Dopo aver effettuato l'accesso a Google Fonts si cerca la famiglia di caratteri che più ci piace aiutandoci anche con la casella di ricerca e con gli appositi filtri. A titolo di esempio consideriamo che si voglia pubblicare il nostro sito con i font Oswald

Si va sul pulsante Quick-use nel riquadro della famiglia prescelta tra le 651 presenti su Google Fonts. Nel caso preso in esame si può anche selezionare una delle sottofamiglie disponibili



tra Light, Normal e Bold. Successivamente si scende in basso nella pagina fino a trovare il codice



Si seleziona la scheda @import e si copia la riga di codice che sarà simile a questa

@import url(http://fonts.googleapis.com/css?family=Oswald);

In sostanza varierà solo il nome della famiglia di caratteri tra un tipo di font e l'altro. Tale riga va inserita in un codice più ampio in questo modo

<style>
@import url(http://fonts.googleapis.com/css?family=Oswald);
body,.post-title,.title,h2.date-header,h2 {font-family:Oswald !important;}
#comments h4  {font-family:Oswald !important;}
</style>

in cui la parte evidenziata di verde è stata aggiunta appositamente per gli utenti di Blogger e il cui significato risulterà chiaro alla fine del post. Nel codice evidenziato di verde dovrà essere riportata la famiglia di font che vogliamo utilizzare e che è colorata di rosso. Tale codice va incollato su Modello > Modifica HTML subito sopra alla riga </head> che può essere trovata con Ctrl+F.

Dopo aver salvato il modello si apre il sito e si visualizzerà con i nuovi font. Il funzionamento di questa tecnica è stato testato con Internet Explorer, Firefox, Chrome e Opera con OS Windows a 32 e a 64 bit. Per ulteriori test si può incollare l'URL della Demo nello strumento Browershots.

BLOG SU BLOGGER CON UNA FAMIGLIA DI FONT QUALSIASI

Consideriamo ora il caso più generale di una famiglia di font scaricata da internet o addirittura creata da noi con uno degli strumenti di cui ho parlato in uno dei due post linkati all'inizio dell'articolo. Quello che avremo quindi del font non sarà altro che un file in formato .ttf cioè del tipo TrueType. Anche in questo caso facciamo un esempio pratico che è il modo didatticamente più adeguato per illustrare queste tematiche. Ho scaricato allo scopo la famiglia di font Akka dal sito Free Premium Fonts semplicemente andando su Download. Visto che ciascun browser ha bisogno di un particolare formato di font dobbiamo convertire il file .ttf in tutti gli altri formati che servono. Utilizzeremo il servizio gratuito Font2Web

selezionando il file e andando su Convert & Download per scaricare il file ZIP con tutti i formati necessari. Si scompatta lo ZIP con 7-Zip, con un programma analogo o con lo strumento nativo di Windows. Si potrà aprire una cartella che contiene i file della famiglia. Clicchiamo sulla sottocartella fonts per visualizzarli

Si tratta di file con estensioni .otf, svg, ttf e woff. Questi caratteri per essere compresi dai vari browser dovranno essere caricati su un hosting. Vediamo come fare con Google Drive.

COME CARICARE I FONT SU GOOGLE DRIVE

Dopo l'accesso a Google Drive dobbiamo creare una Cartella e impostarla come Pubblica in modo da poterla condividere sul web. Alternativamente possiamo anche usare una cartella pubblica che già abbiamo nel nostro account. Carichiamo i  file dei font su tale cartella andando su Upload > File

Adesso clicchiamo sulla freccia verticale accanto alla cartella quindi su Condividi > Condividi



Si aprirà una finestra in cui ricavare l'ID della cartella

copiando la stringa alfanumerica tra = e &. Adesso apriamo nel browser questo URL

https://googledrive.com/host/ID-DELLA-CARTELLA

con al posto di ID-DELLA-CARTELLA la stringa appena copiata. Nella pagina che si apre si visualizzeranno tutti i file in essa contenuti

Si va con il destro del mouse su ciascuno dei quattro file che sono stati caricati e si sceglie Copia indirizzo del link. Otterremo quattro URL che sono i link diretti ai quattro file. Per brevità chiamiamoli in questo modo:

URL_nomefont.otf
URL_nomefont.svg
URL_nomefont.ttf
URL_nomefont.woff

COME INTERVENIRE NEL MODELLO DI BLOGGER

Costruiamo ora un codice con questa struttura

<style>
@font-face {
    font-family: 'nomefont';
    src: url('URL_nomefont.otf');
    src: url('URL_nomefont.otf?#iefix') format('embedded-opentype'),
         url('URL_nomefont.woff') format('woff'),
         url('URL_nomefont.ttf') format('truetype'),
         url('URL_nomefont.svg#nomefont') format('svg');
    font-weight: normal;
    font-style: normal;
}
body,.post-title,.title,h2.date-header,h2 {font-family:nomefont !important;}
#comments h4 {font-family: nomefont !important;}
</style>

dove al posto di nomefont va semplicemente inserito il nome della famiglia dei caratteri mentre al posto delle parti in rosso vanno inseriti gli URL ottenuti da Google Drive. Il file in formato .otf viene incollato due volte. Tale codice va incollato su Modello > Modifica HTML subito sopra alla riga </head>. Dopo aver salvato il modello potremo visualizzare il blog con questi nuovi caratteri

Nel mio test i nuovi font sono correttamente visibili con Internet Explorer, Chrome, Opera e Firefox ma con OS Windows a 64 bit mentre con un mio vecchio PC a 32bit non sono visualizzati con Firefox. Nulla posso dire su Safari e sui dispositivi mobili. Riguardo a questi ultimi chiaramente conta molto il modello e il tipo di browser utilizzato. Visto il grande sviluppo di questo settore non è escluso che queste personalizzazioni possano essere visualizzate da alcuni dispositivi anche in tempi piuttosto brevi.

OSSERVAZIONI CONCLUSIVE

Le parti di codice evidenziate di verde di questo codice come di quello per i Google Fonts sono ad uso esclusivo degli utenti di Blogger e servono per visualizzare tutti i principali elementi del blog con i nuovi caratteri. Ricordo brevemente che il selettore body serve per tutto il corpo del blog, .post-title per il titolo dell'articolo, .title per lo stesso elemento in altri modelli, h2.date-header per la data, h2 per i titoli dei widget e #comments h4  per il numero dei commenti. Volendo si possono togliere uno o più selettori se si vuole visualizzare l'elemento cui si riferiscono con un altro tipo di font. Se volessimo ampliare la platea degli elementi visualizzati con i font personalizzati dovremmo trovare il relativo selettore. Per completare l'installazione possiamo cercare nel modello tutte le occorrenze di font-family che non facciano parte della parte iniziale delle variabili e inserirvi il nuovo nome dei font al posto di quello vecchio.