Pubblicato il 17/11/14e aggiornato il

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

font-google-blogger

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

oswald-font

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

codice-google-fonts

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

convertire-file
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

formati-font

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

caricare-file-google-drive

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

condividere-cartella

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

id-cartella-google-drive

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

hotlink-file-google-drive

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.




8 commenti :

  1. Ciao, io ho provato a fare come dici, passo per passo, solo, al momento di ottenere la stringa alfanumerica tra = e & mi ritrovo solo con questo:

    https://drive.google.com/file/d/0B7Uds5Q0Hz2qaUdFbkZSNkxxNTA/view?usp=sharing
    https://drive.google.com/file/d/0B7Uds5Q0Hz2qTG1vb0RxMDB6S00/view?usp=sharing
    https://drive.google.com/file/d/0B7Uds5Q0Hz2qMko4cmJvNE0yVDA/view?usp=sharing
    https://drive.google.com/file/d/0B7Uds5Q0Hz2qMXlLTkhuNERrVjA/view?usp=sharing
    https://drive.google.com/file/d/0B7Uds5Q0Hz2qTTR5RWdXd2dfLVk/view?usp=sharing

    Soluzioni? Oppure ho sbagliato qualcosa io? Provo a spiegarmi ancora: al momento di caricare i file, ho caricato i fonts con le varie estensioni, e non la cartella all'interno della quale sono contenuti. Ho fatto bene o no?

    RispondiElimina
    Risposte
    1. Prima devi creare la cartella e impostarla come Pubblica andando su Condividi poi caricare i file dentro la cartella. Devi trovare il link diretto di ciascun file come spiegato nel post
      @#

      Elimina
    2. Aggiornamento: anziché selezionare SOLO i caratteri, ho selezionato la cartella che li conteneva ed ho seguito quanto riportato dalla guida, ed infatti la stringa alfanumerica tra = e & mi è comparsa ed ho potuto proseguire. O almeno, lo credevo.

      Ora, che succede? Arrivo alla parte clou, copio il tuo codice, sostituisco l'URL, lascio il trattino basso, aggiungo il nome del carattere e continuo fino a terminare, ma non succede nulla. Anzi, il blog mi reimposta il carattere di default su tutto il blog. Ora, cosa ho sbagliato? Io credo di aver sbagliato ad inserire il codice, che ho messo inserito sopra < / head >, anche se mi sa che lì andava solo la riga del formato .otf, giusto? Inoltre, io vorrei, dato che me lo hai insegnato, e la cosa mi torna particolarmente utile quando voglio fare titoli ad effetto con colori o font speciali (ad oggi presi solo da Google Fonts), utilizzare il nuovo font, quello caricato attraverso questa guida, solo nel titolo del post, e non ritrovarmi modificato tutto il carattere del post.

      Suggerimenti? Grazie.

      Elimina
    3. Per usare il font solo per il titolo basta usare solo questa riga di codice
      .post-title {font-family:Oswald !important;}
      Ovviamente con il giusto nome per la famiglia dei font
      @#

      Elimina
    4. Ovviamente. Ok, e dove inserisco la riga, sempre sopra < / head > ?
      E poi, così smetto di rompere, mi chiedo: come fa il blog a sapere da dove prendere il font, se lì inserisco solo il nome? Devo comunque fare tutto il procedimento?

      Elimina
    5. Tutto dipende dalla riga
      @import url(http://fonts.googleapis.com/css?family=Oswald); dove devi cambiare il nome del font. E' questa quella che carica il carattere sul blog. Se vuoi limitarti al titolo del post al posto di

      @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;}

      tra < style > e < /style > metti questo

      @import url(http://fonts.googleapis.com/css?family=Oswald);
      .post-title{font-family:Oswald !important;}


      sempre cambiando il nome del carattere
      @#



      Elimina
  2. Ciao Ernesto, ho usato questo tutorial per inserire un font personalizzato esclusivamente sul titolo dei post ed ha funzionato, ma, al contempo, si sono "incasinati" anche gli altri font del blog: appaiono misti )alcuni in arial, altri in Georgia... è stranissimo!). Naturalmente il selettore che ho usato è solo il ".post-title". Da cosa potrebbe dipendere? Grazie!

    RispondiElimina
    Risposte
    1. RISOLTO: mi rispondo da sola :) ho visto che devo settare tutti i font da html in questo codice, poiché non vengono ereditati in automatico da quelli impostati nella pagina di design. Se comunque avessi qualche altra osservazione/dritta te ne sarei molto grata!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.