Come usare e abbinare i Google Fonts per la stampa e per il web.

Come installare, scaricare, abbinare e usare i Google Fonts in programmi di grafica, in editor di documenti, in pagine web o in un blog di Blogger.

Quando si crea un documento non è mai una buona scelta utilizzare più di una famiglia di caratteri. Se si escludono eccezioni sempre possibili è sempre meglio redigere il documento con lo stesso tipo di font.

Il discorso è diverso quando si lavora per la stampa o per il web. In questi casi l'utilizzo di più famiglie di font può avere effetti positivi sul risultato ma solo a patto che le famiglie di font siano tra loro abbinabili ovvero se sia compatibile una loro coabitazione nella stessa pagina o nella stessa schermata.

Trovare famiglie di font che si abbinano è più difficoltoso che trovare colori compatibili in un outfit. In questo post vedremo come procedere per trovare i tipi di caratteri che più si abbinano tra di loro limitatamente ai font gratuiti messi  disposizione da Google con i suoi Google Fonts che al momento possono contare su 841 famiglie.

I Google Fonts sono gratuiti e possono essere liberamente utilizzati nel nostro computer oppure in una pagina web. Per scegliere i Google Fonts si possono usare i filtri posti sulla colonna di destra in cui selezionare categorie, lingua, spessore, larghezza, Serif, Sans Serif, trend, ecc.

Dopo aver scelto la famiglia di carattere di base ci si pone il problema di scegliere i font con cui abbinarla.

ABBINARE I GOOGLE FONT CON BRANDMARK

Brandmark Font Generator è una applicazione che si propone proprio di abbinare le varie famiglie di font. Nel primo menù si sceglie la famiglia di font quindi si sposta il cursore

per settare il valore della variazione rispetto al font iniziale. In teoria il nome dei font abbinati dovrebbe cambiare quando si modifica il cursore. Questo in realtà non sempre succede si può però sempre rinfrescare la pagina e provare gli abbinamenti con il cursore con un nuovo livello di variazione.

In basso sulla destra verranno mostrati i migliori abbinamenti con il font scelto inizialmente da usare per Titolo e Corpo della pagina o del sito web.  Nel test che ho fatto al font di nome Dancing Script sono stati abbinati quelli di nome Dynalight, Fanwood Text e Mukta. Naturalmente non è che si debbono usare tutti e tre ma BrandMark Font Generator aiuta nello scegliere gli abbinamenti delle varie famiglie di caratteri. Tale sito ci permette anche di copiare i codici da usare ma lo si può fare meglio direttamente da Google Fonts.

COME INSTALLARE I GOOGLE FONTS IN WINDOWS 10

Se le varie famiglie di Google Fonts ci servono per un progetto grafico da creare con Photoshop o con altro programma allora dovremo installare tali fonts nel computer.

Si apre il sito Fonts.com da cui si possono installare anche i Google Fonts. Si clicca su Browse Google Fonts

quindi si cerca la famiglia di font da scaricare digitandone il nome nella casella di ricerca

Si clicca poi su SkyFonts accanto alla famiglia che ci interessa quindi su Add. Nella pagina successiva dovremo installare tutto lo strumento di SkyFonts nel caso non sia già presente nel computer.

Bisogna stare attenti a scegliere la versione a 64-bit se abbiamo un tale OS. Verrà scaricato un file in formato ZIP che dovrà essere aperto con 7Zip o con il tool nativo di Windows 10. Faremo un doppio click sul file .exe per installare il Client SkyFonts. Ci verrà mostrata una schermata in cui scegliere Fonts.com come provider. L'icona del client sarà visibile nella Barra delle Applicazioni.

Si va su Settings poi su View All Google Fonts. Si aprirà una pagina web come quella già vista in cui cercare il font che stavolta sarà aggiunto al computer quando si clicca su Add.

Si va quindi su Settings per poi sincronizzare SkyFonts con gli ultimi caratteri aggiunti.

L'utilizzo dei nuovi font aggiunti nel computer è semplicissimo. Tutte le volte che apriremo un programma che utilizza i font del PC (Photoshop, Gimp, Open Live Writer, ecc) potremo scegliere oltre che tra le famiglie di font che erano già presenti anche tra le famiglie di Google Fonts che abbiamo appena aggiunto.

In questo modo potremo usare i nuovi font per i nostri progetti.

COME USARE GOOGLE FONTS IN UN SITO

I Google Fonts possono anche essere usati per mostrare una pagina web o un sito con dei caratteri originali. Dopo aver selezionato il font con gli strumenti di ricerca si clicca sulla icona del Quick Use.

È la prima o la seconda in basso a destra. Si aprirà una nuova pagina che dovremo scorrere fino a trovare le schede di configurazione che sono in numero di tre: Standard, @import e Javascript.

Consiglio di usare la scheda @import . Si scorre poi ancora verso il basso per trovare i CSS specifici per quei font. 

COME PUBBLICARE DEL TESTO CON I GOOGLE FONTS

Se volessimo pubblicare in una pagina web una porzione di testo con questo font dovremo usare un codice come il seguente in cui è stato preso come esempio il font Dancing Script.

<style>
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
.pfont {
font-family: 'Dancing Script', cursive;
}
</style>
<p class="pfont">Questa frase viene visualizzata con il carattere Dancing Script</p>

dove le righe evidenziate di giallo e di verde sono state copiate da Google Fonts. Il risultato sarà il seguente:

Questa frase viene visualizzata da tutti i browser con il carattere Dancing Script

Se invece si volesse tutto il blog con i font personalizzati di Google dovremo modificare il tema.

GOOGLE FONTS NEI BLOG DI BLOGGER

Nello specifico dei blog di Blogger si va su Tema -> Modifica HTML e subito sopra a ]]></b:skin> si incolla la riga di codice copiata nella scheda @import già vista in precedenza. Questo non è sufficiente perché dovremo sostituire tutte le famiglie di font che vogliamo cambiare. È consigliato salvare il Tema prima di procedere.

Per esempio si cerca un codice come questo

body {
   font: $(body.font);  color: $(body.text.color);

che inserisce la regola per il CSS del corpo della pagina. Dovremo sostituirlo con il seguente

body {
   font-family: 'Dancing Script', cursive;  color: $(body.text.color);

Potremo modificare anche l'aspetto del titolo del post e di quello della data aggiungendo nuovi attributi

h2 {font-family: 'Dancing Script', cursive;   font-size: 22px; }
h3.post-title { font-family: 'Dancing Script', cursive; ...}

Si può intervenire anche nella versione mobile di Blogger. Per esempio modificando questo codice

body.mobile  {
   background-size: $(mobile.background.size);
}

in questo modo

body.mobile  {
   background-size: $(mobile.background.size);
font-family: 'Dancing Script', cursive;
}

mostreremo il corpo del post con la famiglia di font Dancing Script. Ovviamente Dancing Script è preso solo come esempio. Se non riusciste a trovare il codice per modificare il font di un dato elemento potete provare con lo Strumento Ispeziona di Chrome per trovare il selettore univoco dell'elemento. Con questo codice

.selettore {font-family: 'Dancing Script', cursive  !important;}

aggiunto nel modello sopra alla riga ]]></b:skin> si visualizzerà il testo di quell'elemento con i font desiderati.