Naturalmente, ci sono diversi plug-in per l'utilizzo di Google Web Fonts nel tuo sito WordPress, ma se stai sviluppando il tuo tema, potresti dover legare strettamente la tipografia scelta, bypassando i plug-in. Di seguito ti mostreremo come utilizzare Google Web Fonts nel tuo tema.

Per prima cosa, andiamo al sito Caratteri web di Google e seleziona il carattere che dobbiamo applicare nel tema. Con l'aiuto di strumenti speciali situati sul lato sinistro, puoi restringere l'area di ricerca, poiché ci sono davvero molti caratteri. Sapevo di aver bisogno di un carattere serif in grassetto per i titoli e il titolo del blog, quindi ho selezionato serif dal menu a discesa Categorie e poi ho spostato il cursore Spessore verso destra.

Di conseguenza, le 617 opzioni che mi sono state offerte sono state eliminate senza problemi a 5. Hai un bel po' di opzioni da completare anteprima caratteri: puoi vedere come apparirà una parola, una frase, un paragrafo di testo o un poster nel carattere selezionato. Puoi scegliere un testo predefinito, puoi impostare il tuo testo, scegliere la dimensione del carattere desiderata.

Una volta trovato il carattere che desideri utilizzare sul tuo sito, fai semplicemente clic sul pulsante Aggiungi alla raccolta.

Puoi aggiungere dozzine di caratteri alla tua raccolta. Tuttavia, questo non è sempre necessario. Solo perché puoi farlo non significa che dovresti farlo. Prova a limitarti a un massimo di tre caratteri. Meglio ancora, due. Per motivi di prestazioni, mi piace ancora utilizzare il font legacy sicuro per il Web per il corpo del testo del sito e mantenere i font Web per i titoli e altri elementi che richiedono particolare enfasi o attenzione. Fai attenzione alla leggibilità dei tuoi caratteri: non utilizzare un carattere appariscente se i tuoi visitatori non riescono a capire cosa c'è scritto.

Quando aggiungi i tuoi caratteri alla raccolta, li vedrai nella sezione blu nella parte inferiore del sito. Una volta che hai i caratteri che desideri utilizzare nella tua raccolta, fai clic sul pulsante Usa.

Successivamente, verrai indirizzato a una schermata che presenterà un'istruzione in quattro passaggi. Da esso imparerai come usare i caratteri. Se desideri scaricare i caratteri selezionati per l'utilizzo in redattore grafico per valutarli o prendere uno screenshot.png attraente per il tuo tema, tutto ciò che devi fare è fare clic sul pulsante Scarica caratteri nella parte superiore della pagina. Se vuoi solo usare il carattere nel tuo tema, non è necessario scaricarlo sul tuo computer.

Nel primo passaggio, puoi scegliere gli stili e il peso del carattere incluso. Nella seconda fase, puoi selezionare il set di caratteri che desideri includere. Puoi anche valutare come la tua collezione di font influenzerà la velocità di caricamento della pagina.

Ora passiamo al terzo passaggio, che non è facile come i precedenti. Nella terza fase, otteniamo il codice che deve essere aggiunto ai nostri siti: tre diverse opzioni. Selezionando l'opzione Standard, tuttavia, ci allontaneremo in qualche modo dalle linee guida di Google per supportare i metodi consolidati per l'aggiunta di stili ai temi WordPress. Nel codice della versione standard, copiamo solo l'URL specificato come attributo href per il tag link.

Quindi apri il file functions.php del tema. Creeremo una funzione per caricare il CSS che useremo nel nostro tema:

Funzione ggl_load_styles() ( )

Vedi il prefisso ggl sulla mia funzione? Questa è una delle pratiche WordPress di successo. Prefissa sempre i nomi delle tue funzioni di WordPress per ridurre il rischio di conflitti con altre funzioni nel tuo tema, child theme o plugin.

Ora in questa funzione, dobbiamo registrare il nostro foglio di stile ricevuto da Google:

Funzione ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); ) )

Stiamo usando la funzione wp_register_style. Il primo argomento è un descrittore, ad es. abbreviazione che possiamo usare per fare riferimento a questo foglio di stile più avanti nel nostro codice. Il secondo argomento è il percorso del file. Stiamo utilizzando l'URL che abbiamo ricevuto nel terzo passaggio delle istruzioni di Google.

Successivamente, includiamo il nostro foglio di stile principale per il nostro tema. Spero che tu non abbia inserito un tag link nella sezione head del tuo file header.php? In tal caso, torna al file ed elimina questo codice. Quindi includi il foglio di stile nel file functions.php:

Funzione ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) )

Stiamo usando la funzione wp_enqueue_style. Ha gli stessi argomenti di wp_register_style. Per prima cosa, leghiamo un descrittore al nostro foglio di stile. Quindi otteniamo il percorso del nostro foglio di stile. Fortunatamente, in WordPress, puoi ottenere il percorso usando la funzione get_stylesheet_uri(). Quindi specifichiamo le dipendenze. Il nostro file style.css dipende dal foglio di stile di Google Web Fonts.

Infine, usiamo l'hook wp_enqueue_scripts per chiamare la nostra funzione:

Funzione ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) ) add_action("wp_enqueue_scripts", "ggl_load_styles");

Il file functions.php è terminato. Ora dobbiamo fare l'ultimo passaggio per utilizzare il carattere selezionato. Il quarto passaggio Istruzioni Google mostra quali valori dobbiamo passare alla proprietà font-family per poter utilizzare il nostro font. Voglio fare tutti i miei titoli in carattere Holtwood One SC:

h1, h2, h3, h4, h5, h6 ( famiglia di caratteri: "Holtwood One SC", serif; )

E voglio fare la descrizione del sito nel font Rouge Script:

Descrizione del sito ( font-family: "Rouge Script", corsivo; )

Tutto! Non c'è altro da fare! Hai aggiunto Google Web Fonts al tuo tema WordPress. Usali responsabilmente!

Saluti cari lettori. Oggi parleremo dei google font (google web fonts), di come scaricarli e collegarsi al sito.

vado sul sito www.google.com/fonts/, nel filtro a destra, seleziona: 1. la categoria desiderata, 2. se necessario, ordinali e 3. seleziona la lingua di cui abbiamo bisogno (se hai bisogno di un carattere russo nel menu a sinistra, seleziona Cirillico).

Quindi abbiamo scelto il carattere, ora devi selezionarne lo stile, per questo espandi il pannello dal basso ( Aprire il cassetto di selezione) e vai alla scheda PERSONALIZZARE e scegli gli stili e le lingue che desideri.

Per scaricare clicca sul pulsante scarica.

Collegamento del carattere scaricato

Copia i caratteri contenuti nell'archivio nella cartella /fonts, che dovrebbe trovarsi nella stessa directory della cartella /css del tuo sito HTML.

Connessione standard font scaricati sembra così

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file_name .woff") format("woff"), url("FontFileName.ttf") format("truetype"), url("FontFileName.svg#DSNoteRegular") format("svg"); font-weight: normal; font -stile: normale; )

Nel mio caso la connessione sarà simile a questa

/* Codice per includere il font in /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font- stile: normale; font-weight: normale; )

Per collegare il carattere di tua scelta al sito, vai alla scheda incorporare, lì vedrai 2 modi per connetterti:

1 NORMA

Codice dato deve essere aggiunto alla sezione il tuo documento HTML.

2. @IMPORTA

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Importante. Indipendentemente dal metodo di connessione, utilizzare le seguenti regole CSS per definire queste famiglie: font-family: 'Roboto', sans-serif; più su questo sotto.

Google Fonts è una delle migliori risorse per i font web gratuiti e Google ti offre diversi modi per importarli nel tuo sito web. Sfortunatamente, nessuno di questi include il popolare motore WordPress. Ciò significa che devi usare i plugin, di cui ce ne sono molti, o sporcarti le mani armeggiando con il codice.

La buona notizia è che puoi installare qualsiasi font dalla libreria di Google su quasi tutti i temi WordPress senza troppi problemi. Come esattamente - ti insegneremo oggi.

Ci sono due opzioni: collegare il plugin o giocare un po' con il file functions.php.

Ma prima vorrei elencare i vantaggi e svantaggi di Google Font così che tu possa finalmente decidere se utilizzarli o meno nei tuoi progetti.

Buoni e cattivi caratteri web di Google

Quando si tratta di caratteri web, Google è uno dei le migliori opzioni in termini di prestazioni . Tutto grazie al design leggero e al sistema di memorizzazione nella cache. I visitatori non devono attendere il caricamento dei caratteri di Google se hanno visitato di recente un sito che li ha utilizzati. Caratteri popolari come Open Sans possono migliorare le prestazioni del tuo sito riducendo i tempi di caricamento.

Un'altra caratteristica è quella Google ti consente di scaricare questi caratteri , quindi puoi usarli nei tuoi layout.

E infine la piattaforma è completamente gratuita . Per iniziare a utilizzare i caratteri, devi solo accedere o iniziare Cassetta postale su Gmail (chi non ha Gmail oggi?).

Delle carenze puoi specificarlo la scelta dei caratteri di Google è piccola molti di loro sono simili tra loro. Devi dedicare molto tempo alla ricerca per trovare un font decente e originale. Esistono pochissimi caratteri per il cirillico.

Inoltre, ci sono comuni problemi di sicurezza - devi fornire alcuni dati personali durante l'installazione dei font da Google sul tuo sito.

Come installare Google Fonts utilizzando i plugin di WordPress

Se cerchi plugin, la prima cosa che vedrai nei risultati della ricerca è Plugin WP Google Fonts e Easy Google Web Fonts . Questi sono davvero due dei migliori plugin.

I plugin non sono la soluzione ideale per Installazioni Google font su un sito WordPress, non solo in termini di prestazioni, ma anche perché i plug-in non consentono di selezionare determinate parti di testo. Tuttavia, se tu o il tuo cliente siete convinti che sia meglio usare i plugin, guardate queste due opzioni.

Questo plug-in ti consente di scegliere come target elementi specifici come intestazioni H1, paragrafi e citazioni. Ottieni anche un'opzione CSS personalizzata per ulteriori lavori con stili di carattere individuali. Aggiungere e personalizzare i caratteri Google sul tuo sito WordPress è piuttosto semplice con questo plugin.

Easy Google Web Fonts è all'altezza del suo nome e semplifica l'installazione di Google Fonts, anche per i principianti. Puoi utilizzare la funzione Anteprima dal vivo per visualizzare, testare e ottimizzare i caratteri senza uscire dal sito Web e creare le tue regole per i caratteri senza scrivere una sola riga di codice.

Il modo corretto per installare Google Fonts in un template WordPress

Alla fine, arriviamo all'opzione per aprire il file functions.php e giocare un po' con il codice. Prima di poterlo fare, devi selezionare un carattere dalla libreria di Google. Per fare un esempio, proviamo a prendere uno molto popolare Apri sans.

Quindi devi scegliere uno stile di carattere: normale, grassetto o corsivo. Puoi farlo da solo :)

Dopo aver selezionato gli stili, Google ti fornirà uno snippet di codice. Il nostro si presenta così:

Inoltre, abbiamo lo stile CSS:

famiglia di caratteri: "Open Sans", sans-serif;

Ora è il momento di aprire il file functions.php (percorso file: wp-content/themes/yourtheme). Alla fine del file, aggiungi una nuova funzione:

funzione carica_font()
{
wp_register_style("et-googlefonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googlefonts");
}
add_action("wp_print_styles", "load_fonts");

La chiave di questa funzione è il comando "wp_enqueue_style", che fa sì che WordPress chiami i fogli di stile dei font nell'intestazione di ogni pagina. Se guardi attentamente vedrai che abbiamo rimosso il link href= e rel='stylesheet' type'text/css' dal codice che Google ci ha fornito e dovrai fare lo stesso se vuoi aggiungere qualsiasi altro font Google per il tuo sito WordPress.

Tutto quello che devi fare ora è aprire il file CSS principale e incollarlo nello stile Open Sans. Qui si applicano le solite regole, quindi aggiungi il seguente codice al tuo foglio di stile, salva e aggiorna:

corpo
{
carattere: normale 1em "Open Sans", sans-serif;
colore: #313131;
}

Questo stile funzionerà in tutto il sito. Puoi impostare uno stile diverso per singoli frammenti di testo:

Testo grassetto
{
carattere: grassetto 1em "Open Sans", sans-serif;
}

Come puoi vedere, in realtà è molto semplice. Prova a controllare il risultato :)

La prima parte del capitolo è dedicata alla conoscenza dei font CSS. In questa pagina imparerai come includere i font nei CSS, cosa sono i web font e come lavorarci, quali formati di font sono disponibili, come utilizzare Google Fonts. Innanzitutto, diamo un'occhiata a un semplice esempio di inclusione di un font CSS:

P ( famiglia di caratteri: Verdana; )

Questo piccolo pezzo di codice indica che tutti i tag

Carattere Verdana applicato. La proprietà font-family imposta quale font o font-family verrà usato. La visualizzazione corretta di questo stile nel browser dell'utente dipende dal fatto che il carattere specificato sia installato o meno sul computer dell'utente. Nel nostro caso, se il computer dell'utente non dispone del carattere Verdana, il browser visualizzerà il carattere predefinito.

Un tempo, i progettisti dovevano specificare anche diversi caratteri di riserva nel caso in cui mancasse quello principale sul computer dell'utente. Diciamo che vuoi dare uno stile al tuo testo in Verdana e utilizzare Trebuchet MS, Geneva e qualsiasi font sans-serif come fallback. È scritto così:

P ( famiglia di caratteri: Verdana, "Trebuchet MS", Geneva, sans-serif; )

Durante l'elaborazione di questo codice, il browser verificherà innanzitutto la presenza del carattere Verdana sul computer dell'utente. Se il carattere è presente, il contenuto dei tag

Visualizzato con questo tipo di carattere. Se manca il carattere, il browser controllerà il carattere successivo nell'elenco, Trebuchet MS. Se manca anche questo font, verrà verificata la presenza del font successivo, Geneva. Se il computer dell'utente non dispone anche di Geneva, il browser selezionerà un altro carattere sans-serif disponibile e visualizzerà il testo al suo interno.

Nota: nel codice abbiamo scritto il nome del font Trebuchet MS tra virgolette. È necessario prendere il nome del carattere tra virgolette doppie o singole quando contiene spazi.

Puoi leggere cos'è un carattere con serif (serif) e senza (sans-serif) nella pagina di Wikipedia.

Font web

Il modo sopra descritto di utilizzare i caratteri ha un enorme svantaggio: sei limitato nel numero di caratteri. Dovrai accontentarti solo di quelle opzioni che molto probabilmente sono installate sulla maggior parte dei computer.

Come puoi aumentare la scelta dei caratteri per rendere il design della pagina individuale, aggiungere originalità? I caratteri Web vengono in soccorso. Leggi ulteriormente il capitolo e imparerai come lavorare con loro.

Quindi, per visualizzare il font desiderato nel browser dell'utente, abbiamo bisogno che questo font venga scaricato sul suo computer. È abbastanza facile farlo. Questo metodo per collegare i caratteri ai CSS apre possibilità davvero ampie per i designer. Ma vale la pena menzionare un unico neo: in primo luogo, non tutti i browser supportano un determinato formato di carattere (il che porterà al fatto che il carattere non viene visualizzato), e in secondo luogo, se il file del carattere è grande, può rallentare caricamento della pagina.

Supporto formato

Come gestire il problema della mancata corrispondenza del formato del file? Diamo un'occhiata alla tabella che mostra i formati di font più diffusi e scopriamo quali browser li supportano:

Nota: Puoi sempre trovare informazioni aggiornate sul supporto del formato dei caratteri su caniuse.com. Devi inserire il nome del formato nella barra di ricerca (ad esempio, ttf).

Se stai prendendo di mira i browser moderni, ti sarà sufficiente utilizzare il formato del carattere TTF, il più comune e utilizzato. Nel caso in cui sia necessario disporre di più formati dello stesso carattere, è possibile utilizzare speciali convertitori online da un formato all'altro, quindi collegare tutti i file uno per uno. In questo modo il browser potrà scegliere il formato del carattere con cui funziona.

Incluso un font web usando @font-face

Supponiamo che tu abbia il tuo carattere univoco chiamato MyUniqueFont in formato TTF e desideri che il testo del corpo della tua pagina web sia visualizzato in quel carattere. La prima cosa da fare è copiare il file del font nella cartella in cui si trovano tutti gli altri file del sito. Per non creare confusione, puoi creare cartella separata specificamente per i caratteri, nominandolo, ad esempio, caratteri .

@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

La proprietà font-family in questo caso gioca un ruolo diverso: con essa, assegniamo un nome al font, in modo da poter utilizzare successivamente questo nome quando scriviamo uno stile:

P ( famiglia di caratteri: MyUniqueFont; )

La seconda riga specifica il percorso del file del font. Nel nostro esempio, il file MyUniqueFont.ttf si trova nella cartella dei caratteri. Il tuo URL potrebbe essere diverso.

Google Font

Google semplifica l'inclusione di qualsiasi carattere dalla raccolta di Google Fonts. Tutto quello che devi fare per iniziare a utilizzare il font che ti piace è specificare alcune impostazioni nella pagina dei font su Google, quindi copiare il link speciale a questo font e aggiungerlo al tuo documento web.

Nota: l'intera raccolta di font di Google è disponibile sul sito Google Font. Nella pagina puoi utilizzare vari filtri per cercare i caratteri per categoria, spessore, alfabeto.

Di seguito descriveremo ogni passaggio per collegare un font da Google. Per capire cosa in questione, seleziona qualsiasi tipo di carattere da Pagine Google Fonts e aprirlo facendo clic sul pulsante Quick-use.

Passaggio 1: scegli uno stile

Prima di tutto, sulla pagina del carattere selezionato, verranno visualizzate le opzioni per il suo stile, oltre a un'icona del tachimetro, che non significa altro che la velocità di caricamento del carattere. Più stili di carattere scegli, più tempo ci vorrà per caricarlo. Pertanto, si consiglia di selezionare solo gli stili che si intende utilizzare.

Passaggio 2: scegli un alfabeto

Più avanti nella pagina, è possibile selezionare un set di caratteri: latino, cirillico, ecc. A seconda del carattere, potrebbero non essere disponibili tutte le varianti dell'alfabeto. Simile al paragrafo precedente, è meglio selezionare la casella solo davanti all'alfabeto di cui hai bisogno.

Passaggio 3: aggiungi il codice al sito

Il primo metodo prevede l'aggiunta di un collegamento al server di Google nel codice HTML, da cui viene scaricato il font. Devi copiare il pezzo di codice già finito e posizionarlo tra i tag nel documento HTML. Esempio:

...

Il secondo modo consiste nell'includere il carattere utilizzando la direttiva @import. Codice pronto situato nella seconda scheda del punto 3 nella pagina del font Google selezionato. Deve essere aggiunto all'inizio del foglio di stile (altrimenti il ​​file non verrà importato). Il codice è simile a questo:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

La particolarità del primo metodo è che dovrai aggiungere un collegamento al carattere nell'intestazione di ogni pagina in cui intendi utilizzarlo. Questo è facile da implementare su siti con un numero ridotto di pagine, ma problematico per risorse di grandi dimensioni. Il secondo metodo è conveniente perché il codice può essere posizionato all'inizio di un foglio di stile esterno, quindi tutte le pagine a cui è collegata questa tabella riceveranno il carattere necessario, che verrà caricato utilizzando la direttiva @import.

Passaggio 4: Stile

Dopo aver completato i passaggi precedenti, puoi iniziare ad applicare il carattere. Hai già visto come è scritta una tale regola CSS:

P ( famiglia di caratteri: "Roboto", sans-serif; )

Se nel primo passaggio hai scelto diverse opzioni di carattere (ad esempio, hai aggiunto il carattere grassetto Bold 700), nel terzo passaggio il codice cambierà leggermente:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Per poi rendere il carattere in grassetto, scrivi lo stile CSS in questo modo:

P ( font-family: "Roboto", sans-serif; font-weight: 700; )

Nota: in Google Fonts, per indicare il peso di un carattere vengono utilizzate solo unità standard da 100 a 900. Ad esempio, normale (predefinito) equivale a 400 (normale) e il grassetto standard equivale a 700 (grassetto).

Principali vantaggi Servizio Google font è:

• facilità d'uso (anche un principiante può gestire il servizio e tutto il codice necessario viene generato automaticamente - non resta che copiarlo);
• disponibilità di caratteri (non è necessario pagarli);
• sono forniti tutti i formati di font utilizzati (ciò significa che ogni browser potrà caricare esattamente il formato di font con cui lavora).

Tra le carenze del servizio non c'è una grande varietà di caratteri, soprattutto quelli cirillici. A proposito, ci sono altri servizi simili su Internet, ad esempio TypeKit (a pagamento).

Risultati

Oggi abbiamo diverse opzioni per collegare font originali e non standard alle pagine web. Ognuno di questi metodi ha i suoi pro e contro. Quale opzione è meglio usare, devi determinare tu stesso. Questo spesso dipende dalla situazione e diversi approcci possono essere utili in diversi casi. A questo punto, devi solo sapere come usare i font nei CSS.

Un'ottima fonte di caratteri per i web designer. IN WPBv4 ha iniziato a utilizzare una popolare combinazione di caratteri Carattere Google: cuffie Osvaldo E Lora. Alcuni utenti hanno posto domande sulla possibilità di utilizzare i font di Google nei temi di WordPress e su come farlo. Questo articolo discuterà come aggiungere Google Web Fonts a Temi Wordpress Giusto senza influire sulle prestazioni del tuo sito.

Trovare Google Web Fonts che ti piace

Per prima cosa devi trovare quei caratteri da Google che ti piacciono. Cerca le opzioni tra i font suggeriti nella libreria chiamata Libreria di caratteri Google. Una volta trovata un'opzione adatta, fare clic sul pulsante Utilizzo rapido:

Dopo aver fatto clic su questo pulsante, lo sarai nuova pagina. Scorri fino a visualizzare un modulo chiamato " Aggiungi questo codice al tuo sito web":

Copia il codice e incollalo nel blocco note, lo useremo in seguito. Di solito vengono utilizzati almeno 2 caratteri diversi. Ad esempio, nella nostra pratica sono stati utilizzati i caratteri Osvaldo + Lora. Quindi la procedura sopra descritta deve essere ripetuta per il secondo font.

Aggiunta di Google Web Fonts al tuo tema WordPress

Esistono tre modi principali per aggiungere caratteri da Google al tuo sito web. Ad esempio, esiste un modo standard, un modo per importare @importare e aggiungendo con javascript. Di solito viene utilizzato uno dei primi due metodi.

Il modo più semplice è aprire il file del tema style.css e incollare il seguente codice al suo interno, relativo al carattere da aggiungere (ricorda, lo abbiamo copiato nel blocco note nel primo passaggio):

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

Questo è quello che fanno molte persone StudioPress, Genesi). Tuttavia, questo non è un metodo completamente corretto per aggiungere caratteri aperti. Utilizzo del metodo @importare blocca i download paralleli, facendo sì che il browser Web scarichi il file del font fino alla fine prima di continuare a scaricare il resto del contenuto del tuo sito web. Pertanto, sebbene questo metodo sembri conveniente, non lo è Il modo migliore per lavorare con il carattere, se ti interessa la velocità e le prestazioni del tuo sito. Puoi leggere di più su questi dettagli Qui.

La cosa migliore sarebbe combinare le richieste per diversi Google Fonts in una richiesta per evitare richieste HTTP eccessive. Ecco come farlo. Aggiunta di codice:

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

Anche se sei costretto a usare @importare, almeno combina più richieste in una sola.

Come aggiungere Google Web Fonts senza compromettere le prestazioni del sito web

La cosa migliore sarebbe usare metodo standard, che utilizza collegamenti anziché importazioni di file. Prendi solo due indirizzi URL dal primo passo di questa guida. Combina 2 tipi di carattere diversi aggiungendo un simbolo tra di loro | . Quindi inserisci il codice risultante in un blocco Testa il tuo argomento. Per fare ciò, dovrai modificare il file header.php e aggiungi il codice dal foglio di stile ad esso. Dovresti ottenere qualcosa di simile al seguente:

obbiettivo primarioè aggiungere una richiesta di carattere in una fase iniziale. Secondo il blog del progetto Caratteri web di Google se c'è un tag script prima della dichiarazione del font @font-face, Poi Internet Explorer nulla verrà visualizzato sulla pagina fino a quando non viene caricato il file del carattere stesso.

Dopo aver completato questo passaggio, puoi semplicemente utilizzare lo snippet di codice e il carattere risultanti nel file css il tuo argomento. Sarà simile a questo:

H1 ( famiglia di caratteri: "Oswald", Helvetica, Arial, serif; )

Ci sono parecchi temi e framework per bambini. Non consigliato modificare i file del tema principale, soprattutto se si utilizza un framework; perché le modifiche al tema verranno cancellate ogni volta che aggiorni la versione del framework. Dovrai lavorare su componenti aggiuntivi e filtri nel tema principale o nel suo framework se desideri aggiungere correttamente i caratteri Google ai temi secondari.

Ad esempio, se guardi la pagina planimetria, il team ha creato il tema WPBv4 come tema figlio personalizzato dal framework Genesi. Vediamo come aggiungere i caratteri Web di Google a un tema figlio basato su Genesi.

Come aggiungere Google Web Fonts al tema child basato su Genesis

Apri il tema figlio e il suo file funzioni.php e aggiungi il seguente codice a questo file:

Add_action("genesis_meta", "wpb_add_google_fonts", 5); funzione wpb_add_google_fonts() ( echo " "; }

La cosa principale da fareè guardare il codice all'interno del blocco genesis_meta. Per impostazione predefinita, ci sono opzioni come META- descrizioni, parole chiave, fogli di stile, favicon, ecc. Specificare la priorità 5 , ci assicureremo che il foglio di stile venga caricato prima che venga caricato il foglio di stile principale.

Sfortunatamente, non possiamo coprire tutti i genitori e i framework esistenti che sono là fuori. Se hai domande su temi specifici, chiedile agli sviluppatori e agli autori di temi nelle discussioni appropriate dei forum degli sviluppatori di temi.

Il nostro consiglio finale per quanto riguarda Caratteri web di Google sul tuo sito: non fare domande o sperimentare con caratteri che non intendi utilizzare. Ad esempio, se hai solo bisogno di normale e carattere in grassetto, non utilizzare o personalizzare ogni altro stile possibile per un carattere particolare. Speriamo che questo post ti aiuti a configurare e utilizzare correttamente Google Web Fonts sul tuo sito WordPress.