Come caricare i caratteri Google localmente in WordPress: un elemento di ottimizzazione trovato in GTmetrix, Pingdom e Google Page Speed ​​Insights

Se il tuo sito WordPress ha Google Font errori in GTmetrix/Pingdom, il caricamento locale di Google Fonts dovrebbe risolverli.


Non puoi controllare alcune risorse e script esterni, il che li rende impossibili da comprimere, minimizzare o ottimizzare. Ciò può influire seriamente sulla velocità di WordPress. Una delle risorse esterne più comuni sono Google Fonts. Se hai già configurato un plug-in di cache come WP Rocket o WP Fastest Cache, potresti iniziare a notare risorse esterne come font che incidono su gradi + tempi di caricamento. È qui che entra in gioco il caricamento locale di Google Fonts. Ciò consente al plug-in della cache di comprimere tutte le risorse relative ai font personalizzati.

Effettua un backup completo del tuo sito (o almeno dei file che stai modificando) prima di apportare modifiche.

Google-font-GTmetrix

Passaggio 1: Scegli un carattere Google

In questo esempio, useremo Carattere Roboto con due pesi dei caratteri: normale (400) e grassetto (700).

Google-font-Selection

Usa meno Google Fonts – mantieni i tuoi caratteri Google al minimo (meno caratteri = meno richieste).

Sii selettivo con i pesi dei caratteri – il numero di pesi influisce anche sui tempi di caricamento. Se hai solo bisogno della versione in grassetto, deseleziona gli altri pesi in modo che Google Fonts carichi solo quelli di cui hai bisogno.

Passaggio 2: scarica il font

Scarica i caratteri quando sei pronto. Google scaricherà automaticamente tutti i pesi dei caratteri, quindi la selezione dei pesi dei caratteri non è richiesta in questo passaggio ed è invece richiesta nel passaggio 3.

Google-font-Download

Passaggio 3: convertire i caratteri in caratteri Web

Successivamente, convertiremo questi file di caratteri (.ttf) in file di caratteri web. Userò Transfonter. Vai al loro sito, fai clic su Aggiungi caratteri, poi carica solo i tipi di carattere che utilizzerai sul tuo sito web. Sto usando Roboto-Regular.ttf e Roboto-Bold.ttf quindi ho pesi sia regolari che audaci. Lasciare le impostazioni predefinite poiché WOFF e WOFF2 coprono tutti i principali browser. Ora fai clic su Converti.

Transfonter-Google-Font-conversione

Seleziona solo i tipi di carattere che utilizzerai sul tuo sito Web …

Google-font-Conversion-Selection

Passaggio 4: Scarica i file di caratteri convertiti

Una volta convertiti i caratteri, puoi scaricarli. Nel file zip, ogni carattere includerà i formati WOFF e WOFF2 (poiché abbiamo scaricato 2 caratteri, avremo un totale di 4 file di caratteri).

WOFF-Google-Font-conversione

Passaggio 5: carica i file dei caratteri nei file di WordPress

Carica i file dei font web via FTP o cPanel, idealmente in wp-content / uploads cartella in modo che il tema e gli aggiornamenti principali non li sovrascrivano. Ho creato una cartella “fonts” e li ho caricati lì (per separarli da altri file). Per confermare che sono stati caricati correttamente e hai i collegamenti corretti, apri i collegamenti nel tuo browser e i caratteri dovrebbero iniziare a scaricare.

Esempio:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Sostituire yourwebsite.com con il tuo sito web (e HTTPS se usi SSL). Idealmente, prova tutti e 4 i link e assicurati di avere gli URL corretti (e assicurati anche di salvarli da qualche parte).

Passaggio 6: Aggiungi carattere personalizzato a CSS

Successivamente, aggiungeremo il CSS ottenuto all’interno del file zip scaricato denominato stylesheet.css. Questo è il codice CSS che collegherà i tuoi caratteri al tuo CSS esistente e li renderà pronti per l’uso.

Dove posizionare il codice CSS è soggettivo ma puoi utilizzare un foglio di stile esterno o WordPress ” wp_enqueue_style funzione in Functions.php o all’inizio del tuo style.css file (o CSS personalizzato se ne hai uno). Ho intenzione di incollarlo nel file style.css predefinito del tema. Copia / incolla il codice nel foglio di stile e cambia gli URL relativi in ​​URL assoluti.

URL predefiniti in stylesheet.css:
src: formato url (‘Roboto-Bold.woff2’) (‘woff2’),
formato url (‘Roboto-Bold.woff’) (‘woff’);

Cambia questi in:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Formato Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Formato Roboto-Regular.woff ‘) (‘ woff ‘);

Fondamentalmente, basta includere l’URL della cartella prima del nome del file del carattere.

Questo è facoltativo ma, se preferisci, crea una classe personalizzata per utilizzare facilmente il carattere nell’HTML esistente. Qui abbiamo chiamato le nostre classi roboto_font e roboto_bold_font. Per fare ciò, aggiungi questo al tuo file style.css (dopo il codice sopra):

.roboto_font {

famiglia di caratteri: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

famiglia di caratteri: “Roboto”, “Arial”, sans-serif;

peso carattere: grassetto;

}

Passaggio 7: prova il carattere

Ora crea una pagina di prova e inserisci il seguente codice in Editor di testo

analisi

Test font personalizzato

Test font personalizzato

Google-font-Testing

Visualizza l’anteprima della pagina. Se l’hai fatto correttamente, dovresti vedere il nuovo carattere personalizzato! Il primo titolo è il carattere predefinito del tuo sito Web, il secondo e il terzo sono i caratteri Google Fonts che abbiamo aggiunto:

Local-Google-Fonts

Passaggio 8: impostare il carattere predefinito

Per rendere questo il carattere predefinito del tuo sito Web, aggiungi questo CSS al tuo file style.css:

body {

famiglia di caratteri: “Roboto”, “Arial”, sans-serif;

}

Stai attento! Se hai già un carattere personalizzato, potrebbe non apparire correttamente e richiedere il debug o la modifica delle proprietà della famiglia di caratteri esistenti e la loro sostituzione con questo invece.

Passaggio 9: avere sempre fallback dei caratteri

È buona norma applicare un carattere Google come famiglia di caratteri. Invece, dovresti avere più caratteri specificati inclusi i caratteri comuni come Arial, Times New Roman in modo che il browser possa ricorrere a questi caratteri nel caso in cui il carattere non si carichi o impieghi più tempo a caricarsi.

Senza fallback:
famiglia di caratteri: ‘Roboto’;

Con carattere di fallback:
famiglia di caratteri: ‘Roboto’, Arial, sans-serif;

Ora, nel caso in cui non riesca a caricare i caratteri Google, il browser tornerà al carattere Arial o al tipo di carattere sans-serif predefinito del sistema e non causerà alcun problema con il rendering dei caratteri.

Ripeti il ​​test del tuo sito Web (in GTmetrix)

Non dovresti vedere alcun errore di Google Fonts in esso …

New-GTmetrix-Report.png

Hai domande? Fammi uno squillo.

Domande frequenti

&# X2705; Come velocizzare Google Fonts?

Combinare Google Fonts, ospitarli localmente e preconnetterli e prefetterli può contribuire a migliorare i tempi di caricamento. Controlla la tua Cascata GTmetrix per ottenere un benchmark dei tuoi caratteri, quindi testalo nuovamente dopo l’ottimizzazione.

&# X2705; Come convertire i caratteri nei file dei caratteri web?

Usiamo Transfonter.

&# X2705; Che dire dei font personalizzati di Elementor?

I font personalizzati Elementor possono anche ospitare Google Fonts localmente ed è integrato in Elementor Pro. Puoi usarlo per caricare i tuoi file di font.

&# X2705; Quali plugin aiutano a ottimizzare i caratteri?

WP Rocket, OMGF, Autoptimize e Perfmatters possono aiutarti a ottimizzare i caratteri.

&# X2705; Che dire di precaricare e preconnettere i caratteri?

Questi possono accelerare i caratteri aiutando i browser ad anticiparli meglio. Utilizziamo il plug-in Perfmatters di Kinsta per precaricare e preconnettere i caratteri, ma puoi anche utilizzare WP Rocket o il plug-in Pre-Resource Hints.

Saluti,
Usama

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map