Utilizzare Google Fonts su WordPress è facile. È una directory gratuita di oltre 800 font web che puoi utilizzare sul tuo sito web. Il servizio Google Fonts è un servizio gratuito di prim'ordine, utilizzato da milioni di siti web WordPress per migliorare l'aspetto e l'usabilità del proprio sito. Ecco come utilizzare Google Fonts su WordPress senza compromettere le prestazioni del sito e migliorando i PageSpeed .
Metodo 1: ospita Google Fonts sul tuo server WordPress
Passaggio 1: scegli un font Google
Utilizzando meno Google Fonts si ridurranno le richieste (meno font = meno richieste).
Seleziona attentamente lo spessore dei caratteri: anche il numero di spessori dei caratteri utilizzati influirà sulla velocità di caricamento della pagina. Per assicurarti che Google Fonts carichi solo gli spessori di cui hai bisogno, deseleziona gli altri in modo che vengano caricati solo i caratteri di cui hai bisogno.
Passaggio 2: Scarica il font
Il download del font è il secondo passaggio del processo. È importante notare che Google scaricherà automaticamente tutti i pesi dei font, quindi non è necessario selezionarli in questa fase. La selezione dei pesi dei font è invece necessaria per il terzo passaggio.
Passaggio 3: Converti i font in font Web
Clicca sul pulsante "Aggiungi font" sul loro sito, seleziona solo i font che utilizzerai sul tuo sito web e caricali. Si tratta di un file roboto-regular.ttf e di un file roboto-bold.ttf, quindi entrambi i pesi sono inclusi. Poiché WOFF e WOFF2 sono compatibili con tutti i browser più diffusi, lascia le impostazioni invariate. Clicca sul pulsante "Converti" per avviare il processo di conversione.
Passaggio 4: Scarica i file dei font convertiti
Non appena i font saranno convertiti, potrete scaricarli. Poiché abbiamo scaricato due font sul nostro computer, avremo un totale di 4 file di font nel file zip (poiché abbiamo scaricato due font, avremo quattro file di font nel file zip).
Passaggio 5: carica i file dei font nei file di WordPress
Assicurati che i file dei font web siano caricati tramite FTP o cPanel , idealmente nella cartella wp-content/uploads, per evitare che vengano sovrascritti dagli aggiornamenti del tema e del core. Abbiamo caricato i font in una cartella "fonts" (in modo che fossero separati dagli altri file). Dovresti essere in grado di scaricare i font dopo aver aperto i link nel tuo browser, così potrai confermare che sono stati caricati correttamente.
Passaggio 6: aggiungi un font personalizzato al CSS
Dopo aver scaricato il file zip, aggiungeremo il codice CSS stylesheet.css al file. Il codice CSS qui sotto collega i tuoi font al tuo CSS esistente e li rende disponibili.
Puoi inserire il codice CSS in functions.php o avviare il tuo file style.css. Puoi utilizzare un file CSS esterno o la funzione wp_enqueue_style di WordPress nel codice CSS. Lo incolleremo nel file style.css predefinito del tema. Sostituisci eventuali URL relativi con URL assoluti copiando e incollando il codice nel foglio di stile.
URL predefiniti del tema in stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Cambia in:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') formato('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
Per utilizzare facilmente il font nell'HTML corrente, crea una classe personalizzata. Classi CSS roboto_font e roboto_bold_font .
.roboto_font {
font-family: “Roboto”, “Arial”, sans-serif; }
.roboto_bold_font {
font-family: “Roboto”, “Arial”, sans-serif;
font-weight: grassetto;
}
Passaggio 7: imposta il carattere predefinito
Per impostare questo font come font predefinito sul tuo sito web, devi includere il codice CSS nel tuo file style.css.
Potrebbe essere necessario eseguire il debug o modificare il font per sostituire le proprietà font-family esistenti.
Il passo successivo è caricare il file stylesheet.css ottenuto all'interno del file stylesheet.css e aggiungere il CSS. Il codice CSS qui sotto farà sì che i tuoi font funzionino con il CSS esistente e siano pronti per essere utilizzati non appena lo inserisci. Puoi utilizzare un foglio di stile esterno o la funzione WordPress wp_enqueue_style per accodare i fogli di stile.
Metodo 2: Precaricamento dei Web Font – Ottimizzazione Above the Fold
Se utilizzi Google Fonts, potresti dover fare riferimento al foglio di stile preparato da Google e inviato al tuo sito web WordPress dai server di Google. Quando utilizzi lo strumento di sviluppo offerto da Google Chrome per ispezionare il tuo sito web, potresti avere un'idea del processo dietro le quinte. È possibile che tu veda due voci per Google Fonts all'interno del codice sorgente.
Si prega di vedere l'immagine allegata qui.
Cliccando sul fonts.googleapis , scoprirai che il foglio di stile per il quale hai generato l'URL viene visualizzato nella pagina aperta. Inoltre, per ogni dichiarazione font-face viene effettuata una chiamata al file del font specifico.
Ciò indica che l'utente deve visitare fonts.gstatic.com per ottenere il peso necessario per il font, se viene utilizzato un font-weight diverso. Questo passaggio potrebbe allungare il tempo di caricamento della pagina WordPress.
Pertanto, accedi al file functions.php del tuo tema attuale e inserisci il seguente codice PHP all'interno della funzione responsabile della gestione dei font.
funzione twentyeleven_resource_hints( $urls, $relation_type ) {
se ( wp_style_is( 'rumi-fonts', 'coda' ) && 'preconnessione' === $relation_type ) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
'origini incrociate',
);
}
restituisci $urls;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Metodo 3: Ottimizza i Google Fonts di WordPress tramite plugin
I plugin, come la maggior parte delle attività relative a WordPress, semplificano notevolmente l'ottimizzazione dei Google Fonts. Inoltre, si occuperanno dell'aspetto software per te, così non dovrai preoccuparti di dove posizionare il codice nel sistema.
Se hai installato Google Fonts sul tuo sito web WordPress ed esegui un test delle prestazioni utilizzando PageSpeed Insights o GTmettrix, riceverai il seguente messaggio di errore: fonts.googleapis.com.
Ciò accade perché i Google Fonts non sono compatibili con la piattaforma WordPress. Indica che il tuo sito WordPress deve ottimizzare i Google Fonts.
Per la correzione è possibile utilizzare un plugin gratuito: OMGF | Host Google Fonts Localmente
Dopo aver completato l'installazione, il plugin inizierà immediatamente a convertire il metodo WordPress wp en queue script() di Google Fonts nella funzione wp head(). Questo plugin fa tutto da solo.
Trova altri articoli simili su Seahawk Media .
