Pubblicato il 06/11/11 - aggiornato il  | 28 commenti :

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.

caratteri del blog su Blogger

 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
Riepilogando brevemente il meccanismo, si deve accedere a Google Webfonts, si sceglie la famiglia di caratteri che ci piace. Si clicca su Quick-use
google-webfonts
Si seleziona e si copia il codice visualizzato nel punto 3) e si incolla nel modello subito sopra alla riga </head>
font-google
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 
font-face-generator
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
cartella di @font-face-generator
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

copiare-link-dropbox-font

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
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.


28 commenti :

  1. un'altra mia pseudo-genialata che sembra aver funzionato è stata l'aprire il file ttf con notepad e risalvarlo nei vari formati... aggiungendo al nome solo .eot o .woff etcetc... e sembra aver funzionato. Questo perché generator non mi andava con explorer (odio explorer) e disperata le ho pensate tutte. Bacio

    RispondiElimina
  2. @soffio di dea
    Sarà una informazione utile a quei masochisti che si ostinano ancora a usare IE :D

    RispondiElimina
  3. c'è un problema di fondo almeno nel mio caso e magari sbaglio in qualcosa
    ma col nuovo layout la modifica HTML si apre in una specie di riquadro "lightbox" (correggimi se sbaglio) e non ho più la possibilità di fare ricerche con F3 e quindi diventa tutto più difficile oltre al fatto che gugghel ti ammonisce in basso che puoi far danni a maneggiare l'HTML
    ... insomma le modifiche sono diventate impossibili senza la possibilità di ricercare la riga o il frammento di codice ..

    RispondiElimina
  4. @Tex Willer
    Sbagli. Clicca in una parte bianca all'interno della pagina popup che si apre dopo che sei andato su Modello > Modifica HTML > Procedi quindi clicca su F3 e vedrai che si apre il campo in cui inserire o digitare la parola da ricercare nel codice. C'è sempre anche la possibilità di espandere i modelli widget. L'unico problema è che le scritte sono molto più piccole ...

    RispondiElimina
  5. OK grazie
    vedi che sbagliavo in qualcosa .. ma questi pure .. con tutte ste modifiche vuoi dare qlc istruzione
    ;-))

    RispondiElimina
  6. Parsifal ho provato a caso •Post di Demo dei caratteri Special Elite Regular , ma FF 7.0.1 non lo mostra. Come mai? :|

    RispondiElimina
  7. @Auto ...
    Caspita è vero. Funziona con Chrome, Opera e IE. Mi sembrava funzionasse anche con Firefox ma forse mi ero dimenticato di testare. Strano perché questi problemi in genere li dà solo IE. Vedrò se è possibile rimediare. Forse dipende da questi font troppo particolari ...

    RispondiElimina
  8. @auto ...
    Proprio ora ho letto sul supporto di Firefox che ci sono caratteri inseriti con @font-face che proprio non riesce a digerire quindi bisognerebbe provare con altri per vedere se va.

    RispondiElimina
  9. Anche io provai a cambiare il font tempo fa e ricordo che ff dava noie, per quello poi lasciai perdere...

    RispondiElimina
  10. anche a me è successo... ma solo quando non è chiaro il nome del font. Quando vai a inserire font-family... devi togliere regular dal nome e molte volte neanche va perché il font magari ha un nome diverso (più lungo o abbreviato) rispetto a quello che inserisci in font-face. E' un po' a tentativi :)

    RispondiElimina
  11. @Soffio di Dea
    Commento utile per i lettori e coloro che volessero imbarcarsi in questa operazione ;D

    RispondiElimina
  12. Grandissimo articolo, mi hai aiutato molto, grazie. L'unica cosa che mi resta fuori è la barra dei menu, le cosiddette "pagine". C'è un modo per andare a cambiare anche quelle?

    RispondiElimina
    Risposte
    1. @Emmegi+-+-
      Ho preso in considerazione il tuo sito
      http://osteriadelbiliardo.blogspot.it/
      spero sia quello giusto.
      Dovresti incollare la riga del font caricato che sarà all'incirca così
      font-family: SigmarRegular !important;

      nei blocchi di codice dopo le righe

      .tabs-inner .widget li a {

      e

      .tabs-inner .widget ul {

      Elimina
    2. Grazie, proverò. Però ora amara sorpresa...Guardo il blog da un altro computer (un mac) e il carattere non c'è...

      Elimina
    3. @Emmegi
      Safari e Firefox sono i browser che danno i maggiori problemi con i caratteri personalizzati.

      Elimina
  13. Carissimo Ernesto ti ringrazio, il tuo blog era quello che stavo cercando per modificare il mio html da Splinder a Blogger e permettermi, mantenendo lo stesso template, di aggiungere a piacere i widget.. una cosa però mi resta incompiuta.. prima col codice html riuscivo a personalizzare le modalità bold e italic, che quindi risultavano di colore diverso... ora con blogger non so se e dove è possibile effettuare questa modifica...

    RispondiElimina
    Risposte
    1. @Erika+-+-+
      Intendi dire che modificavi i colori del solo testo in grassetto e in corsivo? Non ho mai sentito di questa possibilità. Le cose sono tra di loro indipendenti. Un testo può essere messo in grassetto o in corsivo e poi colorato. Se intendi un testo di un post puoi usare l'Editor di Blogger che è molto più evoluto di quello di Splinder.

      Elimina
    2. Si ecco come te lo spiego.. nel codice c'erano delle stringhe che impostavano il colore nei diversi stili.. esempio il grassetto usciva fucsia, il corsivo bianco e il sottolineato celeste coi dot invece della riga dritta... che dici, si può impostare?? dimmi di si *___*

      Elimina
    3. @Erika+-+-
      Si può fare ma non in maniera automatica, bisogna inserire una classe di stile. Seguimi nei prossimi giorni che ci potrei fare un post. Lo dovrei intitolare tipo "Come personalizzare colore e stile di un testo"

      Elimina
    4. ok grazie Ernesto lo inserirei molto volentieri nel codice.. è una personalizzazione che ho sempre inserito nei miei blog ^^

      Elimina
  14. Ciao Ernesto, io ho un problema con il font dei post che appare diverso tra Explorer e Chrome (questi sono i due motori di ricerca che ho controllato fino ad ora).
    Ero ben consapevole del fatto che ci potesse essere qualche differenza tra le due visualizzazioni, ma in Explorer i caratteri del post appaiono troppo grandi rispetto a come li vedo io da Chrome ed ho notato che per gli altri blog non è così. Ho sbagliato io ad impostare qualcosa?

    RispondiElimina
    Risposte
    1. @# No. E' che IE hadei comportamenti diversi dagli altri browser. Prova con questo se non lo hai ancora fatto
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

      Elimina
  15. Ciao Ernesto! Il mio blog in una pagina (una pagina creata con il link ai post con la stessa etichetta) mi riporta un colore errato di alcune scritte (quella sopra l'header e quella dei link...quest'ultima inspiegabilmente blu). Cosa può essere successo?
    Grazie mille per tutto!

    RispondiElimina
    Risposte
    1. Può darsi che nel tuo modello attraverso una personalizzazione sia stato inserito un codice CSS con una classe che richiama quella dei link in modo non voluto e casuale
      @#

      Elimina
  16. salve!
    stavo cercando un tutorial che mi aiutasse a cambiare il font dei titoli dei post e dei widget e sono capitata qua :)
    innanzitutto, grazie mille per la spiegazione!
    però... non riesco a metterla in pratica :(
    seguo tutti i passaggi ma, quando vado a copincollare il codice, il font cambia, sì.... ma non in quello che ho scelto io (premetto che ho scelto un font che non è su google fonts e, come da spiegazione, l'ho caricato sul mio dropbox).
    dove può essere l'errore?

    RispondiElimina
    Risposte
    1. Non posso sapere se hai sbagliato qualciìosa o se il font che hai scelto non sia supportato dal browser che hai usato per testarlo. Nelle prove che ho fatto il sistema funziona. Forse dovresti optare per un font di Google e avresti più possibilità di riuscita
      @#

      Elimina
    2. ho fatto una prova e a quanto pare Firefox e IE non supportano il carattere... soltanto Chrome lo riconosce. che peccato...

      Elimina
  17. Ovviamente quello che voglio io è a pagamento...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy