È facile usare Google Fonts in WordPress. È una directory gratuita di oltre 800 caratteri Web che puoi utilizzare sul tuo sito Web. Il servizio Google Fonts è un servizio gratuito più votato utilizzato da milioni di siti Web WordPress per migliorare l'aspetto del loro sito Web e l'usabilità. Ecco come utilizzare Google Fonts su WordPress senza compromettere le prestazioni del sito e migliorare i delle pagine .
Metodo 1: host Google Fonts sul tuo server WordPress
Passaggio 1: scegli un carattere Google
L'uso di meno caratteri di Google ridurrà le richieste (meno caratteri = meno richieste).
Seleziona attentamente i pesi del carattere: il numero di pesi di carattere che usi influirà anche sulla velocità con cui si carica la pagina. Per garantire che i caratteri di Google caricano solo i pesi di cui hai bisogno, deseleziona gli altri in modo che solo le conseguenze di cui hai bisogno siano imballate.
Passaggio 2: scarica il carattere
Il download del carattere è il secondo passo del processo. È importante notare che Google scaricherà automaticamente tutti i pesi del carattere, quindi in questa fase non è necessaria la selezione dei pesi del carattere. Invece, la selezione dei pesi del carattere è necessaria per il passaggio tre.
Passaggio 3: convertire i caratteri in caratteri web
Fai clic sul pulsante Aggiungi caratteri sul loro sito, seleziona solo i caratteri che utilizzerai sul tuo sito Web e caricali. È un file roboto-regolare.ttf e un file roboto-bold.ttf, quindi entrambi i pesi sono inclusi. Poiché Woff e Woff2 coprono tutti i browser significativi, lasciano le impostazioni così come sono. Fare clic sul pulsante Converti per iniziare il processo di conversione.
Passaggio 4: scarica i file di carattere convertiti
Non appena i caratteri sono stati convertiti, puoi scaricarli. Poiché due caratteri sono stati scaricati sul nostro computer, avremo un totale di 4 file di carattere nel file zip (poiché abbiamo scaricato due caratteri, avremo quattro file di carattere nel file Zip).
Passaggio 5: Carica i file dei caratteri su file WordPress
Assicurati che i file dei caratteri Web vengano caricati tramite FTP o CPanel , idealmente nella cartella WP-Content/Uploads, per evitare di essere sovrascritti dal tema e dagli aggiornamenti di base. Abbiamo caricato i caratteri in una cartella "caratteri" (quindi sarebbero stati separati da altri file). Dovresti essere in grado di scaricare i caratteri dopo aver aperto i collegamenti nel browser, quindi puoi confermare che sono stati caricati correttamente.
Passaggio 6: aggiungi il carattere personalizzato a CSS
Dopo aver scaricato il file zip, aggiungiamo Stylesheet.css CSS nel file. Il codice CSS di seguito collega i caratteri al tuo CSS esistente e li rende disponibili.
Puoi posizionare il codice CSS in funzioni.php o avviare il tuo file style.css. Un file CSS esterno o la funzione wp_enqueue_style 'WordPress possono essere utilizzati nel codice CSS. Nel file predefinito di stile.css del tema, lo incolleremo. Sostituire eventuali 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') formato ('woff2'),
url ('roboto-bold.woff') formato ('woff');
Cambiare 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') formato ('woff');
Per utilizzare facilmente il carattere nell'HTML corrente, creare una classe personalizzata. CLSS Classes 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: audace;
}
Passaggio 7: impostare il carattere predefinito
Per rendere questo carattere il carattere predefinito sul tuo sito Web, è necessario includere il codice CSS nel file Style.css.
Potrebbe essere necessario eseguire il debug o la modifica del carattere per sostituire le proprietà del carattere-familiare esistenti.
Il prossimo passo è caricare il file Stylesheet.css che hai ottenuto all'interno del file denominato Stylesheet.css e aggiungere il CSS. Il codice CSS seguente farà funzionare i tuoi caratteri con il tuo CSS esistente ed essere pronto per essere utilizzato non appena lo inserisci. È possibile utilizzare un foglio di stile esterno o la funzione wordpress wp_enqueue_style per accendere fogli di stile.
Metodo 2: caratteri Web Preload - Sopra l'ottimizzazione Fold
Se stai utilizzando Google Fonts, potrebbe essere necessario fare riferimento al foglio di stile che è stato preparato da Google e inviato al tuo sito Web WordPress dai server di Google. Quando si utilizza lo strumento sviluppatore offerto da Google Chrome per ispezionare il tuo sito Web, è possibile dare un'occhiata al processo dietro le quinte. Esiste la possibilità che tu possa vedere due voci per i caratteri di Google all'interno della fonte.
Si prega di vedere l'immagine che è stata allegata qui.
Quando fai clic sul Fonts.Googleapis , imparerai che il foglio di stile per il quale hai prodotto l'URL è mostrato nella pagina aperta. Inoltre, viene effettuata una chiamata al file di carattere specifico per ogni dichiarazione di facciata.
Ciò indica che l'utente deve visitare fonts.gstatic.com per ottenere il peso necessario per il carattere se viene utilizzato un po 'di carattere diverso. Questo passaggio può allungare il tempo impiegato per caricare la pagina WordPress.
Pertanto, accedi al file Functions.php per il tuo tema corrente e inserisci il seguente codice PHP all'interno della funzione responsabile della gestione dei caratteri.
Funzione Twentyeleven_Resource_hints ($ URLS, $ Relation_Type) {
if (wp_style_is ('rumi-fonts', 'queue') && 'preconnect' === $ relazione_type) {
$ urls [] = array (
'href' => 'https://fonts.gstatic.com',
"Crossorigin,"
);
}
restituire $ urls;
}
add_filter ('WP_RESOURCE_HINTS', 'TWENTISELEVEN_RESOURCE_HINTS', 10, 2);
Metodo 3: ottimizza Google Fonts WordPress usando il plugin
I plug-in, come nel caso della maggior parte delle attività legate a WordPress, rendono molto più semplice ottimizzare i caratteri di Google. Inoltre, si occuperanno dell'aspetto software per te, quindi non dovrai preoccuparti di dove dovrebbe andare 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.
Si verifica perché i caratteri di Google non sono compatibili con la piattaforma WordPress. Indica che il tuo sito WordPress deve ottimizzare i suoi caratteri di Google.
Un plug -in gratuito può essere utilizzato per la fissazione dello stesso. È - omgf | Ospita i caratteri Google a livello locale
Dopo aver completato l'installazione, il plugin inizierà immediatamente a cambiare il metodo WordPress WP en code () Metodo Google Fonts alla funzione WP Head (). Questo plugin fa tutto da solo.
Trova altri simili articoli su Seahawk Media .
