Come aggiungere Google Web Fonts nei temi di WordPress nel modo “giusto”

I font di Google sono un’incredibile risorsa gratuita per i web designer. In WPBv4, abbiamo iniziato a utilizzare una famosa combinazione di caratteri Google: Oswald e Lora. Alcuni dei nostri utenti ci hanno chiesto come aggiungere i caratteri Web di Google nei temi di WordPress. Se ricordi, abbiamo mostrato come aggiungere caratteri Google nell’editor di post di WordPress. In questo articolo, ti mostreremo come aggiungere Google Web Fonts nei tuoi temi WordPress il Il modo corretto, ottimizzato per le prestazioni.


Trova i caratteri web di Google che ti piacciono

La prima cosa che devi fare è trovare un carattere Google che ti piace. Vai su Google Fonts e sfoglia la libreria. Quando trovi il carattere che ti piace, fai clic su “Quick-uso” pulsante.

Caratteri di utilizzo rapido di Google Fonts

Dopo aver fatto clic sul pulsante di utilizzo rapido, verrai indirizzato a una nuova pagina. Scorri verso il basso fino a visualizzare la casella delle istruzioni per l’uso con il codice che puoi aggiungere al tuo sito web.

Codice di incorporamento dei caratteri di Google

Vedrai che ci sono tre diverse schede per aggiungere il carattere al tuo sito. Il primo è il metodo standard e consigliato per aggiungere caratteri Google al tuo sito. La seconda scheda utilizza il metodo CSS @import e l’ultima scheda utilizza il metodo JavaScript.

Ti mostreremo come utilizzare ciascuno di questi metodi e quali sono i pro e i contro.

Tutorial video

Iscriviti a WPBeginner

Se non ti piace il video o hai bisogno di ulteriori istruzioni, continua a leggere.

Aggiunta di caratteri Web di Google nei temi di WordPress

Abbiamo visto principalmente persone che usano i primi due metodi.

Il modo più semplice sarebbe quello di aprire il tuo tema style.css archiviare e incollare il codice dei caratteri ottenuto nella scheda @import, in questo modo:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

Puoi anche combinare più richieste di font in una. Ecco come lo faresti:

@import url (https://fonts.googleapis.com/css?family=Lora|Oswald);

Questo metodo è semplicissimo ma non è il modo migliore per aggiungere caratteri Google al tuo sito WordPress. L’uso del metodo @import blocca i download paralleli, il che significa che il browser attenderà il completamento del download del file importato prima che inizi il download del resto del contenuto.

Se DEVI usare @import, almeno combina più richieste in una.

Metodo di prestazione ottimizzato per l’aggiunta di caratteri Web di Google

Il modo migliore per aggiungere caratteri Google è utilizzare il metodo Standard che utilizza il metodo di collegamento anziché il metodo di importazione. Basta prendere l’URL del carattere ottenuto dal passaggio 1. Se si aggiungono più caratteri, è possibile combinare i due caratteri con un | carattere. Quindi inserisci il codice nella sezione head del tuo tema.

Molto probabilmente dovrai modificare il tuo file header.php e incollare il seguente codice sopra il foglio di stile principale. L’esempio sarebbe simile al seguente:

Fondamentalmente l’obiettivo è quello di mettere la richiesta di font il più presto possibile. Secondo il blog di Google Web Fonts, se è presente un tag di script prima della dichiarazione @ font-face, Internet Explorer non eseguirà il rendering di alcun elemento sulla pagina fino a quando il file del font non viene scaricato.

Una volta fatto, puoi semplicemente iniziare a usarlo nel file CSS del tuo tema in questo modo:

h1 {
famiglia di caratteri: ‘Oswald’, Helvetica, Arial, serif;
}

Ora ci sono molti framework tematici e temi secondari là fuori. NON è consigliabile modificare i file del tema principale in particolare se si utilizza un framework di temi poiché le modifiche verranno ignorate al successivo aggiornamento di tale framework. Dovrai utilizzare i ganci e i filtri presentati da quel tema o framework genitore per aggiungere correttamente i caratteri Google nei temi del tuo bambino.

Accodare correttamente Google Fonts in WordPress

Un altro modo per aggiungere caratteri Google al tuo sito WordPress è accodando il carattere nel file Functions.php del tuo tema o in un plug-in specifico del sito.

funzione wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic.700italic.400.700.300’, false);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Non dimenticare di sostituire il collegamento del carattere con il tuo.

Caricamento di caratteri Google tramite JavaScript

Per questo metodo dovrai copiare il codice nella scheda JavaScript nella sezione Istruzioni per l’uso dei caratteri di Google. Puoi incollare questo codice nel file header.php del tuo tema o del tema figlio immediatamente dopo il tag.

Il nostro ultimo suggerimento sull’uso di Google Web Fonts sul tuo sito sarebbe quello di non caricare i caratteri che non utilizzerai. Ad esempio, se vuoi solo il grassetto e il peso normale, non aggiungere tutti gli altri stili.

Speriamo che questo articolo ti abbia aiutato ad aggiungere Google Web Fonts nei tuoi temi WordPress nel modo giusto, in modo che il tuo sito possa caricarsi rapidamente. Puoi anche consultare la nostra guida su come aggiungere caratteri Typekit in WordPress.

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