Vuoi aggiungere font web di Google nel tuo tema WordPress?
I font di Google ti permettono di utilizzare facilmente bellissimi font web sul tuo sito WordPress. Puoi usarli per migliorare la tipografia, l'esperienza utente e l'estetica del tuo sito.
Questo articolo ti mostrerà come aggiungere correttamente i font web di Google ai temi di WordPress.
Ecco una breve panoramica degli argomenti che tratteremo in questa guida.
- Trovare i migliori font di Google per il tuo tema WordPress
- Metodo 1. Aggiungere font di Google al tuo tema usando un plugin
- Metodo 2. Aggiungere font web di Google all'header del tuo tema
- Metodo 3. Aggiungere font di Google nel foglio di stile del tema
- Metodo 4. Includere correttamente i font di Google in WordPress
- Sezione bonus: Come i font web influenzano la velocità di WordPress
Trovare i migliori font di Google per il tuo tema WordPress
La prima cosa che devi fare è trovare i font di Google che ti piacciono. Visita semplicemente il sito web di Google Fonts e sfoglia la libreria.
Quando trovi un font web-safe che ti piace, cliccaci sopra per visualizzare i diversi stili disponibili.
Puoi selezionare gli stili che desideri utilizzare sul tuo sito web.
Successivamente, fai clic sul pulsante 'Visualizza famiglie selezionate', che aprirà una barra laterale.
Da qui, vedrai le istruzioni per l'uso nella sezione 'Usa sul web'.
Vedrai che ci sono due schede diverse per aggiungere il font al tuo sito
La prima è il metodo Link, che è il modo standard consigliato per aggiungere font web.
La seconda scheda utilizza il metodo CSS @import che ti permette di caricare i font tramite il tuo foglio di stile CSS.
Ti mostreremo come utilizzare ciascuno di questi metodi e quali sono i loro pro e contro.
Nota: Per alcuni di questi metodi, dovrai modificare i file del tuo tema WordPress. Puoi farlo connettendoti al tuo sito web utilizzando un client FTP o l'app File Manager sotto il tuo pannello di controllo di hosting.
Una volta connesso, devi visitare la cartella /wp-content/themes/Nome-del-tuo-tema/. Da lì, troverai i file del tema che potresti dover modificare per questo tutorial.
Per maggiori dettagli, consulta il nostro tutorial su come copiare e incollare snippet di codice in WordPress.
Metodo 1. Aggiungere font di Google al tuo tema usando un plugin
Per questo metodo, utilizzeremo un plugin WordPress per caricare Google Fonts.
Innanzitutto, devi installare e attivare il Plugin Font. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, devi visitare la pagina Aspetto » Personalizza per avviare il personalizzatore del tema. Da qui, vedrai la nuova scheda Plugin Font.
Cliccandoci sopra, verranno visualizzate le opzioni del plugin.
Puoi scegliere di utilizzare Google Fonts per diverse aree del tuo sito web.
In alternativa, puoi anche scegliere di caricare solo i font per il tuo tema WordPress.
Passa semplicemente alla scheda Impostazioni avanzate » Carica solo font.
Da qui puoi scegliere i Google Fonts che desideri caricare per il tuo tema WordPress.
Digita semplicemente il nome del font e poi selezionalo.
Una volta terminato, non dimenticare di fare clic sul pulsante Pubblica per salvare le modifiche.
Ora, se hai utilizzato le funzionalità avanzate del plugin per assegnare font a diverse aree del tuo sito web, queste funzioneranno automaticamente.
D'altra parte, se hai scelto di caricare solo i font, dovrai aggiungere regole CSS personalizzato per essi. Ad esempio, ecco come caricheresti un font per l'elemento paragrafo in tutto il tuo sito web.
p {
font-family: 'Open Sans', sans-serif;
}
Metodo 2. Aggiungere Google Web Fonts all'Header del tuo Tema
Questo metodo è il modo più semplice per aggiungere Google Fonts direttamente al tuo tema WordPress.
Modifica semplicemente il file header.php per il tuo tema WordPress o tema figlio. Dopodiché, copia e incolla il codice Link prima del codice del link del foglio di stile del tuo tema WordPress.
Ecco come apparirebbe:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
Fondamentalmente l'obiettivo è inserire la richiesta del font il prima possibile. Ciò consente al browser dell'utente di scaricare i font prima di renderizzare la pagina.
Una volta fatto ciò, puoi utilizzare il font nel file CSS del tuo tema:
h1 {
font-family: 'Open Sans', sans- serif;
}
Metodo 3. Aggiungere Google Fonts nel Foglio di Stile del Tema
Per questo metodo, importeremo il CSS del font nel file CSS principale del nostro tema WordPress.
Modifica semplicemente il file style.css nella cartella principale del tuo tema WordPress e aggiungi il codice dalla scheda '@import' in cima al file CSS.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
Ecco come appariva nel file style.css del nostro sito demo.
Importante: Assicurati di aggiungere la riga @import in cima al tuo file CSS.
Metodo 4. Includere correttamente i font di Google in WordPress
I primi due metodi che abbiamo menzionato in precedenza richiedono di aggiungere direttamente i font modificando i file del tuo tema WordPress.
Questo funziona bene se stai utilizzando un tema figlio per apportare tutte le tue modifiche.
D'altra parte, se stai apportando queste modifiche al tema principale, le tue modifiche andranno perse la prossima volta che aggiornerai il tema.
Una soluzione più semplice è aggiungere programmaticamente del codice che carichi automaticamente i font di Google da utilizzare nel tuo tema WordPress.
Per questo, devi aggiungere uno snippet di codice personalizzato a un plugin specifico per il sito o utilizzando un plugin di codice personalizzato. Per maggiori dettagli, consulta il nostro tutorial su come aggiungere codice personalizzato in WordPress.
Aggiungi semplicemente il seguente snippet di codice al tuo sito WordPress.
function 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' );
Nota: Non dimenticare di sostituire l'URL con l'URL dei font di Google che desideri aggiungere.
Tutto qui, WordPress utilizzerà ora il metodo Link per recuperare automaticamente i font di Google che hai aggiunto.
Puoi confermarlo visualizzando il codice sorgente del tuo sito web, lì vedrai il tuo foglio di stile dei font di Google aggiunto nella sezione footer del tuo sito web.
Sezione bonus: Come i font web influenzano la velocità di WordPress
I font di Google si caricano estremamente velocemente perché vengono serviti tramite la massiccia rete CDN di Google con posizioni server in tutto il mondo.
Poiché questi font sono utilizzati da milioni di siti web, c'è una buona probabilità che gli utenti li abbiano già memorizzati nella cache del loro browser.
Questo riduce il loro impatto sulle prestazioni della velocità del tuo sito web. Puoi ridurre ulteriormente questo impatto utilizzando solo uno o due web font nel tuo design.
Per altri suggerimenti, consulta la nostra guida completa su le prestazioni e la velocità di WordPress per principianti.
Speriamo che questa guida ti abbia aiutato a imparare come aggiungere facilmente Google Web Fonts al tuo tema WordPress. Potresti anche voler consultare la nostra guida su come creare un tema WordPress personalizzato da zero senza codifica e il nostro elenco dei migliori servizi di hosting gratuiti per siti web.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jiří Vaněk
È fantastico che tu abbia fornito informazioni su come caricare i font localmente su un sito web. Ho lottato a lungo con la velocità e ho cercato di ottimizzare tutto. Questo è stato il primo sito in cui qualcuno mi ha consigliato di caricare i font localmente, e funziona davvero. Erano solo millisecondi, ma anche così, la velocità del sito è migliorata. A volte quei millisecondi fanno la differenza tra verde e arancione in PageSpeed Insights o Google Search Console.
Armando
Ho notato che questo video/istruzioni sono datati 2015 e gli screenshot, ecc. sono diversi. Quando ho provato a incorporare il codice di Google Fonts nel mio file header.php come mostrato, ha generato un errore. Quindi sto pensando che forse questo tutorial debba essere aggiornato? Non sono sicuro, ma... Grazie.
Supporto WPBeginner
Grazie per il tuo feedback, ci assicureremo di dare un'occhiata per aggiornare questo articolo quando possibile.
Amministratore
Wout
Grazie per l'articolo! Si prega di sostituire http: in fonts.googleapis.com/css… con https: nella funzione per accodare Google Fonts per abilitare un link crittografato a googleapis.com…
Supporto WPBeginner
Thanks for pointing this out, we will be sure to update the links as soon as we are able
Amministratore
Sofia
Sono abbastanza sicuro che sia il 2017 perché dobbiamo ancora imparare tutto questo :"((
charles
È ancora il modo giusto per farlo?
Renee
Ho fatto apparire il font ma non riesco a capire come metterlo in grassetto.
Ecco un esempio di quello che ho fatto nel css
font-family: "Open Sans", sans-serif;
font-weight:bold;
nel link che ho aggiunto al mio header.php ho aggiunto questo:
Ho provato a sostituire 700 con bold ma niente da fare...
qualche idea?
grazie in anticipo
Isaac Anderson
Assicurati di controllare i pesi dei font desiderati su Google Fonts dopo averli selezionati nella scheda "personalizza".
Louis
Funziona perfettamente! Grazie.
josh
Eh? Che diavolo significa tutto questo? Come faccio ad aggiungere un font di Google nel mio post o nella mia pagina?
Shubham Kumar
Cosa ne pensi dell'importazione dei Google Web Fonts tramite JavaScript in modo asincrono, come menzionato qui:
Grazie
Shubham
Jordan
Una domanda veloce: ho cercato il riferimento del codice per wp_enqueue_style(). Il suo primo argomento è una stringa che indica il nome del foglio di stile. Nel tuo esempio, usi 'wpb-google-fonts' come primo argomento. Come posso sapere cosa mettere qui per il mio sito?
pete rome
Dove incollo esattamente le cose nell'header? Vedo sempre che ma la gente non spiega mai esattamente dove si trova.
Carla DeLauder
Cosa fa 'false' in questa funzione? Altre funzioni accodate non lo includono.
Grazie.
Kev
quello è l'argomento per l'header o il footer. Poiché la best practice è mettere [quasi] tutti gli script nell'header, il valore predefinito è 'true' => footer, mentre 'false' significherebbe NON nel footer, ma nell'header.
Sfortunatamente, gli script dei font bloccano tutto il resto dal caricamento, quindi metterli nell'header è un po' una seccatura, motivo per cui questo articolo parla di assicurarsi di includere solo i font che si utilizzeranno effettivamente. D'altra parte, metterli nel footer può causare il caricamento temporaneo di font predefiniti come Arial sullo schermo durante la visualizzazione fino al caricamento del webfont. È un inconveniente orribile, ma è quello che è.
Una pratica che sto integrando nel mio flusso di lavoro è caricare condizionalmente i font in base al loro utilizzo nel sito. Ad esempio, forse "grassetto" è usato solo negli h2 e h3 nei modelli di post del blog (single.php), quindi scriverò un accodamento condizionale per lo script in grassetto da accodare solo quando si è nel modello single.php.
Spero che questo aiuti.
Kev
Inoltre, da notare.
Con "grassetto" sopra, intendevo una versione specifica in grassetto di una famiglia di font. <= solo per tua informazione.
Kenneth John Odle
A partire da WordPress 3.3, wp_print_styles è deprecato.
Bram
Sì, dovresti aggiornare questo articolo.
Supporto WPBeginner
Aggiornato.
Amministratore
Supporto WPBeginner
Abbiamo aggiornato l'articolo, ora mostra come aggiungere i font di Google utilizzando la funzione
wp_enqueue_stylecorretta e l'hook di azione wp_enqueue_scripts.Amministratore
isak
Come si mettono in coda due famiglie di font tramite functions.php?
Aprile
Sto usando il plugin Punch Fonts per aggiungere Google Fonts, ma non sono sicuro di come ottenere solo l'intestazione 1 per il font desiderato. Non ho bisogno di questo font per le intestazioni da 2 a 6, quindi voglio usare il Google Font solo per l'intestazione uno. Come scrivo questo nel parametro?
Attualmente sto usando: Oleo+Script+Swash+Caps:400
Melissa
Beh, se qualcuno è bloccato, c'è anche questo plugin chiamato Easy Google Fonts. Molto utile.
Melissa
Salve,
Ho provato tutti e tre i metodi, ma nessuno dei due ha avuto effetto completo. Sembra che si applichi solo a determinati elementi e non ad altri che ho specificato con quel font nel foglio di stile.
Quando uso l'Ispettore Elementi per l'elemento a cui il mio Google Font non è applicato, vedo questo:
#site-title {
font-family: \’Questrial\’, Helvetica, Arial, sans-serif;
Cosa significano queste \\ intorno al mio font? Voglio dire, sembra che indichi un errore, ma non riesco a capire cosa sto sbagliando? Cosa potrebbe essere? Qualche codice che sovrascrive il mio, con priorità più alta? ma dove? come? Arghhhh mi sta facendo impazzire
Ali Sajjad
Gentile Redazione, voglio aggiungere tutti i Google Web Fonts in questo sito, e poi usarli nei miei mezzi,
ma non voglio usare troppi link nel file header. C'è un altro modo?
Supporto WPBeginner
Aggiungi solo i font che vuoi usare.
Amministratore
Anurag
Quindi, ho un blog ( http://www.goingtechy.com/ ). Il problema che ho è che voglio ottimizzare la consegna CSS del Google Font che il mio sito utilizza già. Quindi, il sito ha già Google Fonts. Come posso ottimizzarlo?
Samantha
Grazie mille per questo post! Per qualcuno che non ha una formazione formale in html/css, sono rimasto colpito dalla semplicità di questo post.
Tanisha
So easy and go it to work perfectly. Thanks for this.
Greg
Ciao,
Sto usando Genesis e il tema Parallax Pro...
Ma sono un principiante per cose come php ecc.
Ho aggiunto questo codice al file fuctions.php come mi hai istruito:
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() {
echo ”;
}
Gli header che utilizzano il font sopra rimangono invariati.
Domande:
1. Ho ragione nell'assumere che il codice sopra sia l'unica cosa che devo aggiungere?
2. Dove esattamente dovrebbe essere aggiunto il codice – all'inizio o alla fine di fuctions.php?
2. Manca qualcosa nel codice?
3. Dovrei aggiungere qualcosa al file style.css?
Apprezzo il tuo aiuto
Saluti
Greg
Supporto WPBeginner
Greg, ci sembra a posto. Pensiamo che WordPress abbia omesso la parte dal tuo codice in cui hai visualizzato il link del font. Sì, dovrai usare il CSS per impostare le regole di stile per i selettori in cui vuoi usare il tuo font Google.
Amministratore
Tony Porto
Nessuna delle opzioni sopra è abbastanza buona, sappiamo tutti che “wp_enqueue_style( ‘google-font’)” è il “modo tecnicamente corretto per chiamare uno script, ma in questo caso il tuo <header finirà così;
FONT 1:
FONT 2:
FONT 3:
FONT 4:
Non va bene, deve essere così:
Akmal
Dove devo incollare il codice sopra? Non riesco a trovare l'ultima riga di codice nel mio file header.php? Puoi per favore spiegarmi passo dopo passo?
Grazie.
Supporto WPBeginner
Nel tuo file header.php troverai
</head>, puoi incollare questo codice ovunque prima di questo tag.Amministratore
Sarah
Ho provato a riscrivere quanto segue, e ancora nulla cambia;
/* Importa Font
———————————————————— */
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts () {
echo ‘’;
}
/* Predefiniti
Ha funzionato la prima volta. Sono così confuso!
Grazie per il tuo aiuto.
Sarah
Ciao,
Ero così orgoglioso di me stesso per aver copiato il codice e cambiato il font che ho trovato troppo grande per il mio sito. Quando ho provato a cambiarlo con qualcos'altro, devo aver mescolato qualcosa, e solo uno stile di font continua a mostrarsi, anche quando gioco con i codici. Mi sento un imbranato ora – non parlo di tecnologia. Qualcuno può aiutarmi? L'ho fatto con e senza i numeri nel caso in cui non facciano effettivamente parte. Grazie. Questo è l'ultimo che ho inserito.....
/* Importa Font
———————————————————— */
1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
2
3 function wpb_add_google_fonts() {
4 echo ”;
5 }
/* Predefiniti
———————————————————— */
Supporto WPBeginner
speriamo che tu non abbia inserito i numeri con il codice O li hai inseriti?
Amministratore
Sarah
Nessun numero, ma questa volta mi manca qualcosa. Questo è esattamente quello che ho nella mia tabella;
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() { echo "; }
Sarah
Sembra che il codice abbia funzionato... su un computer. Non ha funzionato su altri due che uso. Potresti per favore suggerire perché potrebbe essere così?
Grazie mille
Karissa Skirmont
Come si possono usare più Google Font in functions.php?
Avevo questo:
//* Enqueue Google fonts add_action( 'wp_enqueue_scripts', 'executive_google_fonts' ); function executive_google_fonts() { wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION ); wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), CHILD_THEME_VERSION ); }Ma il Dancing Script non veniva visualizzato come font sul mio secondo computer, iPhone o tablet.
Ho rimosso Open Sans e ha iniziato a funzionare.
Supporto WPBeginner
@Karissa, il primo argomento della funzione wp_enqueue_style è l'handle dello script di stile che stai caricando. Prova questo codice invece:
//* Enqueue Google fonts add_action( 'wp_enqueue_scripts', 'executive_google_fonts' ); function executive_google_fonts() { wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), 20131111 ); wp_enqueue_style( 'google-font-2', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), 20131111 ); }1-click Use in WordPress
Amministratore
Karissa Skirmont
Lascia perdere, ho capito che dovevo usare un link come questo:
‘//fonts.googleapis.com/css?family=Euphoria+Script|Rouge+Script|Montez|Federo|Great+Vibes|Clicker+Script|Dancing+Script:400,700|Satisfy|Ruthie|Rochester|Open+Sans|Open+Sans+Condensed:300’
Karissa Skirmont
Ah, capisco, ho risposto sopra prima di aggiornare la pagina e vedere la tua risposta.
Usando il link che Google fornisce quando hai selezionato più font, lo produce in questo modo e puoi provare più facilmente diversi font dal vivo sul sito.
Chaitanya
Thank you so much!! Whenever I need any WordPress help, I come directly to wpbeginner as I know I would find a best solution here. You guys don’t know how much you have helped beginners like me, Appreciate you support
Long Live WPBeginner…
Saluti,
Chaitanya
Jenny
Meh, mi piace usare l'import. Meno lavoro per me perché sono pigro~
pete rome
sì, troppo lavoro per ogni metodo qua e là, non dovrebbe esserci bisogno di aggiungere nulla al foglio di stile, trova un plugin
Jimmy Reynolds
A you mean the nerd way
mzilverberg
Qualcosa che mi è sfuggito qui sono stati i commenti condizionali per far funzionare i webfont di Google in IE8 e versioni precedenti se richiedi più di un peso del font. Ad esempio:
<link href=”http://fonts.googleapis.com/css?family=Cabin:400,700″ rel=”stylesheet” type=”text/css” />Ecco perché ho creato una funzione per caricare i font: https://github.com/mzilverberg/LoadGoogleWebfonts
Il mio script posiziona anche gli URL di fallback appropriati all'interno di un commento condizionale.
Con poche righe di codice potresti anche far funzionare questo in functions.php nel tuo tema Wordpress.
Greg
E per quanto riguarda l'aggiunta di Google Fonts al lato admin?
Staff editoriale
Perché vorresti aggiungere Google Fonts al lato amministrativo?
Amministratore
Bruce Smith
Per mantenere il WYSIWYG nell'editor di contenuti dell'amministratore. In modo che io veda la stessa faccia del font nell'editor dell'amministratore come sul mio sito web.
Dan Merhar
Mi stavo chiedendo come fare la stessa cosa (e questo è il primo risultato che è apparso su Google).
So che esistono plugin per aggiungere la funzionalità Google Webfonts all'editor WYSIWYG, ma li rallentano da morire. Ci darò un'occhiata più da vicino per vedere se c'è un modo semplice per aggiungere uno o due font.
Marleen
Grazie mille per aver condiviso, sono davvero felice di questo. Sono un utente Genesis e ho iniziato a usare @import perché è già stato fatto nel foglio di stile. Mi sento molto meglio riguardo a questa soluzione.
Felice 2013!
jeff
Nel tuo codice devo sostituire "IL TUO FOGLIO DI STILE DEL TEMA" con qualcosa??
il mio è STYLE.CSS, o deve essere un URL??
grazie,
Jeff
Staff editoriale
Sì, devi inserire lì il percorso del file style.css del tuo tema.
Amministratore
Charles
Questo è quello che uso.....
Aggiungi questo al file functions.php del tuo tema:
/*----------------------------------*/ /* Load CSS Files /*----------------------------------*/ if(!function_exists('load_theme_styles')) { function load_theme_styles() { if (!is_admin()) { $cssURL = get_template_directory_uri().'/css/'; $fontURL = 'http://fonts.googleapis.com/css?family=Lora|Oswald'; // Registering New Styles wp_register_style('googleFont', $fontURL); wp_register_style('style', $cssURL.'/style.css', 'googleFont', '1.0', 'screen'); wp_register_style('print', $cssURL.'/print.css', 'googleFont', '1.0', 'print'); // Enqueing Styles wp_enqueue_style('googleFont'); wp_enqueue_style('style'); wp_enqueue_style('print'); } } } add_action('wp_enqueue_style', 'load_theme_styles');Cosa ne pensi di questo?
Chris Reynolds
Questo è il modo CORRETTO per aggiungere i font di Google. Usa sempre wp_register_style/wp_enqueue_style
David
Ancora meglio, aggiungi un commento condizionale per servire i font separatamente per IE 7 e 8:
Da qui:
http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
Bryan Nickson
Bei tutorial. Volevo qualcosa del genere.. Complimenti!!
Peter
E l'opzione JS, è un'opzione più veloce o quella è migliore?. Grazie
Staff editoriale
Il metodo in questo è di gran lunga il più raccomandato.
Amministratore
QLStudio
Nella tua risposta non metti in coda il CSS – è davvero il modo migliore per aggiungerlo?
Chris
Ottimo articolo! Penso che sarebbe fantastico se WordPress, per impostazione predefinita, includesse Google Fonts, ma questo sembra abbastanza facile. Grazie per la spiegazione!
Staff editoriale
Google Fonts are great, but not everyone uses it (considering the amount of folks who use WordPress). WordPress has a 95% rule. If the feature would not satisfy 95% of the audience, then it is usually falls in the plugins category. However, sometimes exceptions are made. We can assure you that the Core WP team, will not make this into an exception though
Amministratore
Aaron Crow
Spacchi uomo! Proprio quello che stavo cercando! Grazie per aver pubblicato questo post… Ho cercato per un'eternità per trovare qualcosa sull'aggiunta di questo al mio tema. Sono contento di essermi imbattuto nella tua pagina.
Anderson Curry
Ottimo post e anche se esiste un plugin per farlo, è sempre meglio imparare anche il modo senza plugin.
Brad
Quindi ovviamente non accetti l'uso dei vari plugin per i font di Google. Dovrò rivedere i miei file CSS in quel caso.
sadhu
non capisco la seconda parte che è aggiungere il font alla cosa di azione di aggiunta di Genesis.. è un altro metodo per aggiungere i web font di Google?
e so che non dobbiamo includere tutti gli stili del font, ma il metodo raccomandato, che è http://fonts.googleapis.com/css?family=Lora|Oswald
solo per esempio, cosa succede se voglio solo lo stile grassetto per Lora e lo stile leggero per Oswald, come combinare gli stili dei font?
grazie
Staff editoriale
La seconda parte è SOLO per gli utenti Genesis. Se non stai usando il Genesis Theme Framework, allora non hai bisogno di quella parte. Per combinare gli stili come desideri, ecco come si fa:
http://fonts.googleapis.com/css?family=Oswald:300|Lora:700
Amministratore
Anton
Cosa dovrei fare se volessi usare @font-face nel Genesis Framework come hai mostrato qui con i Google Webfonts, ci sono soluzioni per questo.
Ho cercato tutto il giorno perché i miei font si caricano incredibilmente lentamente!
Saluti
Gautam Doddamani
ottimo tutorial… uso effettivamente il plugin wp google fonts… consiglieresti quel plugin o fare il modo manuale come descritto sopra.. quale è efficiente in termini di prestazioni?
Staff editoriale
Non ho provato quel plugin. Ma cerchiamo quasi sempre di evitare plugin di quel tipo perché può essere fatto più facilmente con i file del tema.
Amministratore
Gautam Doddamani
sweet…thanks will edit my theme instead of using a plugin
Pippin
Evitare il plugin di Google Fonts perché è un plugin non è affatto una buona ragione. Usare il plugin ti offre molta più flessibilità che includerlo nel tuo tema, specialmente se dovessi cambiare tema.
Staff editoriale
Per quanto mi riguarda, i font nella maggior parte dei casi sono considerati elementi stilistici, quindi basati sul tema, e di solito cambiano quando si passa a un tema diverso.
Siddanth Adiga
Ottimo post, stavo cercando proprio questo, stavo provando con css e fontface. Proverò anche questo, grazie
Konstantin Kovshenin
The “Right” way would be to use the wp_enqueue_style function
Here’s some more thoughts: http://kovshenin.com/2012/on-wordpress-theme-frameworks/
Staff editoriale
Konstantin, sono totalmente d'accordo con te. La funzione wp_enqueue_style dovrebbe sempre essere utilizzata. È quello che ho provato a fare per prima cosa, come suggerito da Nathan Rice, nell'articolo di StudioPress sui Google Fonts. Tranne che Google afferma chiaramente che gli stili dei font dovrebbero essere caricati prima di qualsiasi altra cosa. Usando wp_enqueue_style e poi stampandoli con wp_print_styles, questo stampava l'elemento dopo che il foglio di stile principale era già stato caricato. Questo è stato il motivo per cui ho dovuto agganciarmi al hook genesis_meta(). Comunque, sono totalmente d'accordo con i tuoi pensieri nel tuo articolo.
Amministratore
Japh
I’m a little late to this, but I wanted to mention that you could still use
wp_enqueue_style, just set the priority higher so that they are loaded firstBob R
Ottimo tutorial. Una osservazione però: la prima immagine nell'articolo doveva mostrare la scheda @import, vero?
Staff editoriale
No, non doveva mostrarlo.
Amministratore