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

Come mostrare il nostro sito su Blogger con una famiglia di caratteri personalizzati scaricati da internet e caricati su Google Drive, Dropbox o Google Sites per poi aggiungere nel modello il codice con il tag @font-face.

Blogger offre una buona scelta di famiglie di caratteri da utilizzare per il sito. Dopo aver salvato il template si può selezionare tale famiglia andando su Modello > Personalizza > Avanzato > Testo della pagina e scegliere tra i 7 caratteri di default (Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet, Verdana) e i molti caratteri web supportati che vanno da Allerta a Yanone Kaffeesatz.  

Nonostante questa grande disponibilità di font ci sono sempre quelli che vogliono qualcosa di diverso. Lo stesso Google attraverso Google Fonts permette di utilizzare più di 700 tipologie di caratteri da installare in modo molto semplice. Come illustrato nel post appena linkato si deve trovare il codice che permette di caricare la famiglia di font nel modello di Blogger.

Tanto per fare un esempio pratico per usare la famiglia di caratteri denominata Dancing Script si dovrà andare su Modello > Modifica HTML e, subito sopra a </head>, incollare questo codice

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

Gli elementi da visualizzare con i nuovi caratteri sono quelli evidenziati di verde e sono .body (tutto il contenuto del post), .post-title (titolo del post), h2.dateheader (data del post) h2 (titolo dei widget), #comments h4 (testo commenti). 

COME UTILIZZARE DEI FONT SCARICATI DA INTERNET

Se tra le decine di famiglie di caratteri di Blogger e le più di 700 famiglie di font di Google non ce n'è neppure una che vi soddisfa potete cercare i font giusti su internet e scaricare il file in formato .ttf TrueType per implementarli nel vostro sito.

Per essere sicuri che i caratteri vengano visti in modo corretto con tutti i principali browser dobbiamo convertire il file .ttf per avere delle copie in altri formati. Useremo il servizio Font2Web 

Si clicca su Scegli file, si seleziona il file .ttf scaricato da internet e si va su Convert & Download. Verrà scaricato automaticamente un file ZIP con tutti i formati necessari per la implementazione. Si scompatta il file con 7Zip o software analogo per poi caricare sul web tale famiglia. Infatti mentre i Google Fonts sono caricati sui server di Google quelli scaricati da noi non lo sono ancora. Fino a qualche mese fa potevamo usare Google Drive però questo importante servizio di Google cesserà il supporto di hosting a partire dal 31 Agosto 2016 quindi dobbiamo optare per Google Sites, solo se abbiamo un sito tipo blogspot.com, oppure Dropbox se possediamo un dominio personalizzato.  

CARICARE I FILE DEI FONT SU GOOGLE SITES

Vediamo come caricare i file su Google Sites che come detto è un servizio da usare solo se si ha un blog gratuito di Blogger.  Se non avete ancora nessun sito con questo servizio andate su Crea

e nella pagina che si apre si sceglie Modello vuoto quindi si digita il nome del sito che sarà anche quello finale del suo Indirizzo Web. Si clicca su Non sono un robot quindi si va in alto di nuovo su Crea sito. Si va poi di nuovo in alto a destra su Crea pagina

e nella finestra che si apre daremo un nome alla pagina, per esempio lo stesso nome di quello dei font, quindi sceglieremo l'opzione Schedario invece di Pagina Web, Annunci e Elenco



Si clicca su Crea quindi si apre la pagina appena creata cliccando sul suo nome in Mappa del sito



Ora si apre la cartella dei file di vari formati ottenuti da Font2Web



I file si trovano nella cartella Fonts mentre cliccando su demo.html se ne visualizzerà l'Anteprima. Il file font.css può essere invece aperto con Notepad++ e ci mostra il codice da usare



Ritorniamo quindi sulla pagina di Schedario creata su Google Sites per l'upload dei file. Si clicca su Aggiungi file e si selezionano tutti i file da caricare fino al completamento della operazione.



Adesso bisogna trovare il link diretto di ciascun formato di file. Si clicca con il destro del mouse su Scarica quindi si sceglie Copia indirizzo link.



Gli hotlink avranno questa struttura

https://sites.google.com/site/famigliafont32/akka/akka.otf?attredirects=0&d=1
https://sites.google.com/site/famigliafont32/akka/akka.svg?attredirects=0&d=1
https://sites.google.com/site/famigliafont32/akka/akka.ttf?attredirects=0&d=1
https://sites.google.com/site/famigliafont32/akka/akka.woff?attredirects=0&d=1

dovranno essere depurati della parte finale successiva alla estensione del file che negli esempi è colorata di rosso. Tali link diretti dovranno servire per creare un codice come il seguente

<style  type='text/css' media='screen, print'>
@font-face {
    font-family: 'akka';
    src: url('https://sites.google.com/site/famigliafont32/akka/akka.otf');
    src: url('https://sites.google.com/site/famigliafont32/akka/akka.otf?#iefix') format('embedded-opentype'),
         url('https://sites.google.com/site/famigliafont32/akka/akka.woff') format('woff'),
         url('https://sites.google.com/site/famigliafont32/akka/akka.ttf') format('truetype'),
         url('https://sites.google.com/site/famigliafont32/akka/akka.svg#akka') format('svg');
    font-weight: normal;
    font-style: normal;
}
body,body.mobile,.post-title,.title,h2.date-header,h2 {font-family:akka !important;}
#comments h4  {font-family:akka !important;}
</style>

dove sono stati inseriti il nome della famiglia e gli hotlink ottenuti da Google Sites. La parte di codice evidenziata di verde rappresenta i selettori degli elementi che vogliamo mostrare con i nuovi caratteri (corpo del post, titolo, data, commenti, ecc). Se ne possono anche aggiungere altri o togliere quelli che non ci interessano. Tale codice va incollato su Modello > Modifica HTML subito sopra alla riga </head> quindi si salva il template. 

Per concludere ricordo che in taluni browser come Mozilla Firefox bisogna seguire delle istruzioni aggiuntive per permettere la visualizzazioni dei nuovi caratteri con il tag @font-face.

Demo
Clicca qui

Se i caratteri caricati non si visualizzassero correttamente con tutti i browser provate a caricare i file su Google Drive (fino al 31/8/2016) oppure su Dropbox.