È facile utilizzare Google Fonts in WordPress. Si tratta di una directory gratuita di oltre 800 font web che potete utilizzare sul vostro 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 i font di Google su WordPress senza compromettere le prestazioni del sito e migliorando il punteggio PageSpeed.
Metodo 1: ospitare i font di Google sul server di WordPress
Passo 1: Scegliere un carattere Google
L'utilizzo di un minor numero di Google Font riduce le richieste (meno font = meno richieste).
Selezionare con cura i pesi dei caratteri - Il numero di pesi dei caratteri utilizzati influisce anche sulla velocità di caricamento della pagina. Per assicurarvi che Google Fonts carichi solo i pesi di cui avete bisogno, deselezionate gli altri in modo che siano presenti solo le conseguenze di cui avete bisogno.
Passo 2: Scaricare il font
Il download del font è la seconda fase del processo. È importante notare che Google scaricherà automaticamente tutti i pesi dei font, quindi la selezione dei pesi dei font non è necessaria in questa fase. La selezione dei pesi dei font è invece necessaria per la terza fase.
Fase 3: Conversione dei caratteri in caratteri Web
Fare clic sul pulsante Add Fonts (Aggiungi font) sul loro sito, selezionare solo i font che si intende utilizzare sul proprio sito web e caricarli. Si tratta di un file roboto-regular.ttf e di un file roboto-bold.ttf, quindi sono inclusi entrambi i pesi. Poiché WOFF e WOFF2 coprono tutti i principali browser, lasciare le impostazioni così come sono. Fare clic sul pulsante Converti per avviare il processo di conversione.
Passo 4: Scaricare i file di font convertiti
Non appena i font sono stati convertiti, è possibile scaricarli. Poiché sono stati scaricati 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).
Passo 5: Caricare i file dei font nei file di WordPress
Assicuratevi 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 dei temi e del core. Abbiamo caricato i font in una cartella "fonts" (in modo che siano separati dagli altri file). Dovreste essere in grado di scaricare i font dopo aver aperto i link nel vostro browser, in modo da poter confermare che il caricamento è avvenuto correttamente.
Passo 6: Aggiungere il carattere personalizzato al CSS
Dopo aver scaricato il file zip, aggiungeremo il CSS stylesheet.css nel file. Il codice CSS sottostante collega i font al CSS esistente e li rende disponibili.
È possibile inserire il codice CSS in functions.php o all'inizio del file style.css. È possibile 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. Sostituire gli URL relativi con URL assoluti copiando/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');
Modificare in:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
Per utilizzare facilmente il font nell'HTML corrente, creare 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: bold;
}
Passo 7: Impostare il carattere predefinito
Per rendere questo font il carattere predefinito del vostro sito web, dovete includere il codice CSS nel vostro file style.css.
Potrebbe essere necessario eseguire il debug o modificare il font per sostituire le proprietà esistenti di font-family.
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à in modo che i font funzionino con il CSS esistente e siano pronti per essere utilizzati non appena lo si inserisce. È possibile utilizzare un foglio di stile esterno o la funzione di WordPress wp_enqueue_style per inserire i fogli di stile.
Metodo 2: precaricamento dei font Web - Ottimizzazione Above the Fold
Se utilizzate Google Fonts, potreste aver bisogno di fare riferimento al foglio di stile preparato da Google e inviato al vostro sito WordPress dai server di Google. Quando utilizzate lo strumento per sviluppatori offerto da Google Chrome per ispezionare il vostro sito web, potete dare un'occhiata al processo dietro le quinte. È possibile che si vedano due voci per Google Fonts all'interno di Source.
Si veda l'immagine allegata.
Quando si fa clic sul collegamento fonts.googleapis, si apprende che il foglio di stile per il quale è stato prodotto l'URL viene mostrato nella pagina aperta. Inoltre, per ogni dichiarazione di font-face viene effettuata una chiamata al file di font specifico.
Questo indica che l'utente deve visitare fonts.gstatic.com per ottenere il peso necessario per il carattere, se viene utilizzato un font-weight diverso. Questo passaggio può allungare il tempo di caricamento della pagina di WordPress.
Pertanto, accedere al file functions.php del tema corrente e inserire il seguente codice PHP all'interno della funzione responsabile della gestione dei caratteri.
function twentyeleven_resource_hints( $urls, $relation_type ) {
if ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$url[] = array(
'href' => 'https://fonts.gstatic.com',
'crossorigine'.
);
}
restituire $url;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Metodo 3: Ottimizzare Google Fonts WordPress utilizzando un plugin
I plugin, come nel caso della maggior parte delle attività legate a WordPress, rendono molto più semplice l'ottimizzazione di Google Fonts. Inoltre, si occuperanno per voi dell'aspetto software, quindi non dovrete preoccuparvi di dove il codice debba essere inserito nel sistema.
Se avete installato Google Fonts sul vostro sito WordPress ed eseguite un test delle prestazioni utilizzando PageSpeed Insights o GTmettrix, otterrete il seguente messaggio di errore: fonts.googleapis.com.
Si verifica perché i font di Google non sono compatibili con la piattaforma WordPress. Ciò indica che il vostro sito WordPress deve essere ottimizzato per i Google Fonts.
È possibile utilizzare un plugin gratuito per il fissaggio degli stessi. Si tratta di - OMGF | Host Google Fonts Locally
Dopo aver completato l'installazione, il plugin inizierà immediatamente a passare il metodo di WordPress wp en queue script()Google Fonts alla funzione wp head(). Questo plugin fa tutto da solo.
Trovate altri articoli di questo tipo su Seahawk Media.
