In questo tutorial, ti mostrerò come caricare qualsiasi Google Web Font sul tuo blog Blogger. Ci sono alcuni modi per farlo, ma è così che lo faccio.
Questo tutorial è più adatto per coloro che hanno una certa conoscenza CSS. Per questo tutorial sto usando il modello “Semplice” di Blogger.
Ecco un esempio di un font web Google personalizzato installato sul nostro modello Lemon Macaron.
Passo 1
Prima di iniziare, consiglio sempre di eseguire il backup del modello corrente prima di apportare modifiche (nel caso in cui qualcosa vada storto).
Puoi farlo nella tua dashboard andando su Modello > Backup/Ripristino (situato nell’angolo in alto a destra) > Scarica il modello completo.
Passo 2
Dopo aver eseguito il backup del modello, fare clic su Modifica HTML (siamo ancora nella scheda “Modello”).
Passo 3
Lasciando aperta questa pagina, apri una nuova scheda o finestra e vai al sito Web di Google Web Fonts. Cerca il tipo di carattere che desideri utilizzare e seleziona Uso rapido.
Ho scelto di usare il font ‘Lobster Two’.
Passo 4
Per la Sezione 1: Scegli gli stili che vuoi, scegli gli stili che vuoi disponibili per il tuo font (puoi selezionare più stili). Tieni presente che la selezione di troppi stili può rallentare il tuo blog. Ho selezionato Normal 400 come puoi vedere qui sotto.
Per la Sezione 3: Aggiungi questo codice al tuo sito web, fai clic sulla scheda @import.
Passo 5
Copiare le informazioni nella casella @import.
Ora, lasciando aperta questa pagina, torna al tuo blog (dove hai selezionato Modifica HTML). Stiamo andando a incollare il codice di importazione dei font nel modello.
Cerca il testo successivo che si trova verso l’inizio dell’editor del modello (di solito si trova sulle righe 13 o 14):
<b:skin>...</b:skin>
una Volta espanse, incolla le informazioni che è stato copiato da @import casella di Google Web Fonts sito web, il testo seguente:
/* Variable definitions
dovrebbe assomigliare a questo:
fare Clic su “salva modello”. Il tuo carattere è stato importato! Ora puoi posizionare la famiglia di font dove vuoi che venga visualizzata nel tuo modello.
Passo 6
Rapidamente, ti mostrerò come utilizzare il font appena importato. In questo esempio, userò il font per il titolo del mio post. Nell’editor HTML cercare:
h3.post-title, .comments h4
Rimuovi la seguente riga:
font: $(post.title.font);
e sostituiscilo con il testo elencato nella Sezione 4: Integra i font nel tuo CSS sul sito Web di Google Web Fonts.
font-family: 'Lobster Two', cursive;
Dovrebbe assomigliare a questo una volta incollate le informazioni sulla famiglia di font:
