Doriți să adăugați fonturi web Google în tema dvs. WordPress?
Fonturile Google vă permit să utilizați cu ușurință fonturi web frumoase pe site-ul dvs. WordPress. Le puteți folosi pentru a îmbunătăți tipografia, experiența utilizatorului și estetica site-ului dvs.
Acest articol îți va arăta cum să adaugi fonturi web Google la temele WordPress în mod corespunzător.
Iată o scurtă prezentare generală a subiectelor pe care le vom acoperi în acest ghid.
- Găsirea celor mai bune fonturi Google pentru tema dvs. WordPress
- Metoda 1. Adăugarea fonturilor Google la tema dvs. folosind un plugin
- Metoda 2. Adăugarea fonturilor web Google în antetul temei dvs.
- Metoda 3. Adăugați Google Fonts în foaia de stil a temei
- Metoda 4. Adăugarea corectă a fonturilor Google în WordPress
- Secțiune bonus: Cum afectează fonturile web viteza WordPress
Găsirea celor mai bune fonturi Google pentru tema dvs. WordPress
Primul lucru pe care trebuie să-l faceți este să găsiți fonturile Google care vă plac. Pur și simplu vizitați site-ul Google Fonts și răsfoiți biblioteca.
Când găsiți un font web sigur care vă place, faceți clic pe el pentru a vedea diferitele stiluri disponibile.
Puteți selecta stilurile pe care doriți să le utilizați pe site-ul dvs.
Apoi, faceți clic pe butonul „View Selected Families” (Vizualizați familiile selectate), care va deschide o bară laterală.
De aici, veți vedea instrucțiunile de utilizare sub secțiunea „Utilizare pe web”.
Veți vedea că există două file diferite pentru adăugarea fontului pe site-ul dvs.
Prima este metoda Link, care este metoda standard recomandată de adăugare a fonturilor web.
Al doilea tab folosește metoda CSS @import, care vă permite să încărcați fonturile prin foaia de stil CSS.
Vă vom arăta cum să utilizați fiecare dintre aceste metode și care sunt avantajele și dezavantajele lor.
Notă: Pentru unele dintre aceste metode, va trebui să editați fișierele temei WordPress. Puteți face acest lucru conectându-vă la site-ul dvs. web folosind un client FTP sau aplicația Manager de fișiere din panoul de control al găzduirii dvs.
Odată conectat, trebuie să vizitați folderul /wp-content/themes/Numele-temei-dvs./. De acolo, veți găsi fișierele temei pe care poate fi necesar să le editați pentru acest tutorial.
Pentru mai multe detalii, consultați tutorialul nostru despre cum să copiați și lipiți fragmente de cod în WordPress.
Metoda 1. Adăugarea fonturilor Google la tema dvs. folosind un plugin
Pentru această metodă, vom folosi un plugin WordPress pentru a încărca fonturi Google.
Mai întâi, trebuie să instalați și să activați Pluginul de Fonturi. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.
La activare, trebuie să vizitezi pagina Aspect » Personalizare pentru a lansa personalizatorul temei. De aici, vei vedea noua filă Plugin Fonturi.
Făcând clic pe el, veți vedea opțiunile pluginului.
Puteți alege să utilizați Google Fonts pentru diferite zone ale site-ului dvs. web.
Alternativ, puteți alege pur și simplu să încărcați un font pentru tema dvs. WordPress.
Pur și simplu comutați la fila Setări avansate » Încărcați fonturi doar.
De aici puteți alege Google Fonts pe care doriți să le încărcați pentru tema dvs. WordPress.
Pur și simplu tastați numele fontului și apoi selectați-l.
Odată ce ați terminat, nu uitați să faceți clic pe butonul Publicare pentru a salva modificările.
Acum, dacă ați folosit funcțiile avansate ale pluginului pentru a atribui fonturi diferitelor zone ale site-ului dvs. web, acestea vor funcționa automat.
Pe de altă parte, dacă ai ales să încarci doar fonturi, atunci va trebui să adaugi reguli CSS personalizat pentru ele. De exemplu, iată cum ai încărca un font pentru elementul de paragraf pe întregul tău site web.
p {
font-family: 'Open Sans', sans-serif;
}
Metoda 2. Adăugarea fonturilor Google Web în antetul temei dvs.
Această metodă este cea mai ușoară modalitate de a adăuga fonturi Google direct în tema dvs. WordPress.
Editați pur și simplu fișierul header.php pentru tema dvs. WordPress sau tema copil. După aceea, copiați și lipiți codul Link înainte de codul foii de stil a temei dvs. WordPress.
Așa ar arăta:
<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">
Practic, scopul este de a plasa cererea de font cât mai devreme posibil. Acest lucru permite browserului utilizatorului să descarce fonturile înainte de a reda pagina.
Odată ce ați făcut acest lucru, puteți folosi fontul în fișierul CSS al temei dvs.:
h1 {
font-family: 'Open Sans', sans- serif;
}
Metoda 3. Adăugați Google Fonts în foaia de stil a temei
Pentru această metodă, vom importa CSS-ul fontului în fișierul CSS principal al temei noastre WordPress.
Editați pur și simplu fișierul style.css din folderul rădăcină al temei WordPress și adăugați codul din fila '@import' în partea de sus a fișierului CSS.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
Așa arăta în fișierul style.css al site-ului nostru demo.
Important: Asigurați-vă că adăugați linia @import în partea de sus a fișierului CSS.
Metoda 4. Adăugarea corectă a fonturilor Google în WordPress
Primele două metode pe care le-am menționat mai devreme necesită să adăugați direct fonturi prin editarea fișierelor temei WordPress.
Acest lucru funcționează bine dacă utilizați o temă copil pentru a face toate modificările.
Pe de altă parte, dacă faceți aceste modificări la tema principală, atunci modificările dvs. vor fi pierdute data viitoare când actualizați tema.
O soluție mai ușoară pentru asta este să adăugați programatic un cod care încarcă automat fonturile Google pentru ca tema dvs. WordPress să le folosească.
Pentru aceasta, trebuie să adaugi un fragment de cod personalizat într-un plugin specific site-ului sau folosind un plugin de cod personalizat. Pentru detalii, vezi tutorialul nostru despre cum să adaugi cod personalizat în WordPress.
Pur și simplu adăugați următorul fragment de cod pe site-ul dvs. 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' );
Notă: Nu uitați să înlocuiți URL-ul cu URL-ul pentru Google fonts pe care doriți să îl adăugați.
Atât, WordPress va folosi acum metoda Link pentru a prelua automat fonturile Google pe care le-ați adăugat.
Puteți confirma acest lucru vizualizând codul sursă al site-ului dvs., acolo veți vedea foaia de stil Google Fonts adăugată în secțiunea footer a site-ului dvs.
Secțiune bonus: Cum afectează fonturile web viteza WordPress
Fonturile Google se încarcă extrem de rapid, deoarece sunt servite prin rețeaua masivă de CDN a Google, cu locații de server în întreaga lume.
Deoarece aceste fonturi sunt utilizate de milioane de site-uri web, există o bună șansă ca utilizatorii să le aibă deja stocate în cache-ul browserului lor.
Acest lucru le reduce impactul asupra performanței vitezei site-ului dvs. Puteți reduce și mai mult acest impact utilizând doar unul sau două fonturi web în designul dvs.
Pentru mai multe sfaturi, vezi ghidul nostru complet despre performanța și viteza WordPress pentru începători.
Sperăm că acest ghid v-a ajutat să învățați cum să adăugați cu ușurință Google Web Fonts la tema dvs. WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre crearea unei teme WordPress personalizate de la zero, fără codificare, și lista noastră cu cele mai bune servicii de găzduire web gratuite.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Jiří Vaněk
Este grozav că ați oferit informații despre cum să încărcați fonturi local pe un site web. M-am chinuit mult timp cu viteza și am încercat să optimizez totul. Acesta a fost primul site unde cineva mi-a recomandat să încarc fonturi local și chiar funcționează. Au fost doar milisecunde, dar chiar și așa, viteza site-ului s-a îmbunătățit. Uneori, acele milisecunde fac diferența între verde și portocaliu în PageSpeed Insights sau Google Search Console.
Armando
Am observat că acest videoclip/instrucțiuni sunt din 2015, iar capturile de ecran etc. sunt diferite. Când am încercat să încorporez codul Google Fonts în fișierul meu header.php, așa cum este arătat, a apărut o eroare. Deci, mă gândesc că poate acest tutorial trebuie actualizat? Nu sunt sigur, dar... Mulțumesc.
Suport WPBeginner
Vă mulțumim pentru feedback, vom analiza cu siguranță actualizarea acestui articol atunci când vom putea.
Admin
Wout
Mulțumesc pentru articol! Vă rugăm să înlocuiți http: în fonts.googleapis.com/css… cu https: în funcția de enqueue Google Fonts pentru a activa un link criptat către googleapis.com…
Suport WPBeginner
Thanks for pointing this out, we will be sure to update the links as soon as we are able
Admin
Sofia
Sunt destul de sigur că este 2017 de ce trebuie să învățăm toate astea :"((
charles
Este aceasta încă modalitatea corectă de a face acest lucru?
Renee
Am reușit să afișez fontul, dar nu pot să-mi dau seama cum să-l fac să fie îngroșat.
Iată un exemplu a ceea ce am făcut în CSS
font-family:”Open Sans”, sans-serif;
font-weight:bold;
în linkul pe care l-am adăugat în header.php am adăugat acest lucru:
am încercat să înlocuiesc 700 cu bold, dar fără succes...
aveți idei?
mulțumesc anticipat
Isaac Anderson
Asigurați-vă că verificați greutățile fonturilor dorite pe Google Fonts după ce le selectați în fila „personalizare”.
Louis
Funcționează perfect! Mulțumesc.
josh
Huh? Ce naiba înseamnă toate astea? Cum fac să pot adăuga pur și simplu un font Google în postarea sau pagina mea?
Shubham Kumar
Ce părere aveți despre importarea Google Web Fonts folosind JavaScript asincron, așa cum este menționat aici:
Mulțumesc
Shubham
Jordan
O întrebare rapidă – am căutat referința codului pentru wp_enqueue_style(). Primul său argument este un șir de caractere care denotă numele fișierului CSS. În exemplul tău, folosești ‘wpb-google-fonts’ pentru primul argument. Cum pot să știu ce să pun aici pentru site-ul meu?
pete rome
unde lipesc lucrurile în antet exact? văd mereu asta, dar oamenii nu explică niciodată exact unde este.
Carla DeLauder
Ce face „false” în această funcție? Alte funcții înlănțuite nu o includ.
Mulțumesc.
Kev
acesta este argumentul pentru antet sau subsol. Deoarece cea mai bună practică este să plasați [aproape] toate scripturile în antet, implicit este 'true' => subsol, în timp ce 'false' ar însemna NU în subsol, ci în antet în schimb.
Din păcate, scripturile de fonturi opresc totul altceva din a se încărca, așa că punerea lor în antet este puțin neplăcută, de aceea acest articol vorbește despre asigurarea că includeți doar fonturile pe care le veți folosi efectiv. Pe de altă parte, punerea lor în subsol poate face ca fonturile implicite precum Arial să se încarce momentan pe ecranul dvs. în timpul afișării, până când fontul web este încărcat. Este o neplăcere oribilă, dar așa stau lucrurile.
O practică pe care o integrez în fluxul meu de lucru este încărcarea condiționată a fonturilor în funcție de utilizarea lor pe site. De exemplu, poate că „bold” este folosit doar în h2 și h3 în șabloanele articolelor de blog (single.php), atunci voi scrie o funcție condiționată pentru scriptul bold care să fie încărcată doar când sunt pe șablonul single.php.
Sper că acest lucru ajută.
Kev
De asemenea, de notat.
Prin „bold” mai sus, am vrut să spun o versiune specifică bold a unei familii de fonturi. <= doar un mic avertisment.
Kenneth John Odle
Începând cu WordPress 3.3, wp_print_styles este depreciat.
Bram
Da, ar trebui să actualizați acest articol.
Suport WPBeginner
Actualizat.
Admin
Suport WPBeginner
Am actualizat articolul, acum arată cum să adăugați fonturi Google folosind funcția corectă
wp_enqueue_styleși hook-ul de acțiune wp_enqueue_scripts.Admin
isak
Cum adăugăm două familii de fonturi prin functions.php?
Aprilie
Folosesc pluginul Punch Fonts pentru a adăuga fonturi Google, dar nu sunt sigur cum să obțin doar titlul 1 pentru fontul dorit. Nu am nevoie de acest font pentru titlurile 2-6, așa că vreau să folosesc fontul Google doar pentru titlul unu. Cum scriu asta în parametru?
În prezent folosesc: Oleo+Script+Swash+Caps:400
Melissa
Ei bine, dacă cineva este blocat, există și acest plugin numit Easy Google Fonts. Foarte util.
Melissa
Salut,
Am încercat toate cele trei metode, dar niciuna dintre ele nu a avut efect complet. Se pare că se aplică doar anumitor elemente și nu altora pe care le-am specificat cu acel font în foaia de stil
Când folosesc Inspectorul de Elemente pentru elementul unde fontul meu Google nu este aplicat, iată ce văd:
#site-title {
font-family: \’Questrial\’, Helvetica, Arial, sans-serif;
Ce înseamnă aceste \\ în jurul fontului meu? Adică, pare să indice o eroare, dar nu pot să-mi dau seama ce fac greșit? Ce ar putea fi? Un cod care îl suprascrie pe al meu, cu prioritate mai mare? dar unde? cum? Arghhhh mă înnebunește
Ali Sajjad
Stimate redacție, vreau să adaug toate fonturile web Google pe acest site și apoi să le folosesc în mijloacele mele,
dar nu vreau să folosesc prea multe link-uri în fișierul header. altă modalitate?
Suport WPBeginner
Adaugă doar fonturile pe care vrei să le folosești.
Admin
Anurag
Deci, am un blog ( http://www.goingtechy.com/ ). Problema pe care o am este că vreau să optimizez livrarea CSS a fontului Google pe care îl folosește deja site-ul meu. Deci, site-ul folosește deja fonturi Google. Cum îl pot optimiza?
Samantha
Vă mulțumesc mult pentru acest post! Pentru cineva care nu are pregătire formală în html/css, am fost impresionat de simplitatea acestui post.
Tanisha
So easy and go it to work perfectly. Thanks for this.
Greg
Salut,
Folosind Genesis și tema Parallax Pro…
Dar un începător la lucruri precum php etc
Am adăugat acest cod în fișierul functions.php conform instrucțiunilor dumneavoastră:
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() { echo "; }
Antetele care folosesc fontul de mai sus rămân neschimbate.
Întrebări:
1. Am înțeles corect presupunând că codul de mai sus este singurul lucru pe care îl adaug?
2. Unde exact ar trebui adăugat codul – la început sau la sfârșitul fișierului fuctions.php?
2. Lipsește ceva din cod?
3. Ar trebui să adaug ceva în fișierul style.css?
Apreciez ajutorul tău
Cu stimă
Greg
Suport WPBeginner
Greg, pare în regulă pentru noi. Credem că WordPress probabil a omis partea din codul tău unde ai afișat link-ul fontului. Da, va trebui să folosești CSS pentru a seta reguli de stil pentru selectorii unde vrei să folosești fontul tău Google.
Admin
Tony Porto
Niciuna dintre cele de mai sus nu este suficient de bună, știm cu toții că „wp_enqueue_style( ‘google-font’)” este „modul tehnic corect de a apela un script, dar în acest caz antetul dvs. va arăta așa;
FONT 1:
FONT 2:
FONT 3:
FONT 4:
Não é bom, precisa ser assim:
Akmal
Unde ar trebui să lipesc codul de mai sus? Nu am putut găsi ultima linie de cod nicăieri în fișierul meu header.php? Îmi puteți spune pas cu pas?
Mulțumesc.
Suport WPBeginner
În fișierul dvs. header.php veți găsi
</head>, puteți lipi acest cod oriunde înainte de această etichetă.Admin
Sarah
Am încercat să reintroduc următoarele și tot nu se schimbă nimic;
/* Importă fonturi
———————————————————— */
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts () { echo ‘’; }
/* Implicit
A funcționat din prima. Sunt atât de confuz!
Mulțumesc pentru ajutor.
Sarah
Salut,
Eram atât de mândră de mine că am copiat codul și am schimbat fontul, pe care l-am găsit prea mare pentru site-ul meu. Când am încercat să-l schimb cu altceva, trebuie să fi încurcat ceva și continuă să apară doar un singur stil de font, chiar și atunci când mă joc cu codurile. Mă simt ca un prost acum – nu vorbesc tehnic. Poate cineva să mă ajute? Am făcut asta cu și fără cifre, în cazul în care acestea nu fac parte din el. Mulțumesc. Acesta este cel mai recent pe care l-am introdus.....
/* Importă fonturi
———————————————————— */
1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5); 2 3 function wpb_add_google_fonts() { 4 echo "; 5 }
/* Implicituri
———————————————————— */
Suport WPBeginner
sperăm că nu ai introdus numerele cu codul Sau ai făcut-o?
Admin
Sarah
Nu sunt numere, dar îmi lipsește ceva de data aceasta. Acesta este exact ceea ce am în tabelul meu;
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() {
echo ”;
}
Sarah
Se pare că codul a funcționat... pe un computer. Nu a funcționat pe alte două pe care le folosesc.
Îmi puteți sugera, vă rog, de ce ar putea fi așa?
Mulțumesc mult
Karissa Skirmont
Cum poți folosi mai multe Google Fonts în functions.php?
Am avut asta:
//* 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 ); }Dar fontul Dancing Script nu apărea pe al doilea computer, pe iPhone sau pe tabletă.
Am eliminat Open Sans și a început să funcționeze.
Suport WPBeginner
@Karissa, primul argument în funcția wp_enqueue_style este mânerul pentru scriptul de stil pe care îl încărcați. Încercați acest cod în schimb:
//* 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
Admin
Karissa Skirmont
Am uitat, am realizat că trebuie să folosesc un link de genul acesta:
‘//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, înțeleg, am răspuns mai sus înainte de a reîmprospăta pagina și de a vedea răspunsul dvs.
Folosind linkul pe care îl oferă Google atunci când aveți mai multe fonturi selectate, acesta le produce astfel și puteți încerca mai ușor diferite fonturi live pe site.
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…
Salutări,
Chaitanya
Jenny
Meh, îmi place să folosesc importul. Mai puțină muncă pentru mine, pentru că sunt leneș~
pete rome
da, prea multă muncă la fiecare metodă aici și acolo nu ar trebui să fie necesar să adăugați nimic la foaia de stil, găsiți un plugin
Jimmy Reynolds
A you mean the nerd way
mzilverberg
Ceva ce am omis aici au fost comentariile condiționale pentru a face ca fonturile web Google să funcționeze în IE8 și versiunile anterioare dacă solicitați mai mult de o greutate a fontului. De exemplu:
<link href=”http://fonts.googleapis.com/css?family=Cabin:400,700″ rel=”stylesheet” type=”text/css” />De aceea am creat o funcție pentru încărcarea fonturilor: https://github.com/mzilverberg/LoadGoogleWebfonts
Scriptul meu plasează, de asemenea, URL-urile de rezervă corespunzătoare într-un comentariu condițional.
Cu câteva linii de cod, ați putea face ca acest lucru să funcționeze și în functions.php din tema dvs. Wordpress.
Greg
Ce zici de adăugarea Google Fonts pe partea de administrare?
Personal editorial
De ce ați dori să adăugați Google Fonts pe partea de administrare?
Admin
Bruce Smith
Pentru a menține WYSIWYG în editorul de conținut de administrare. Astfel încât să văd același font în editorul de administrare ca și pe site-ul meu web.
Dan Merhar
De fapt mă întrebam cum să fac același lucru (și acesta este primul rezultat care a apărut pe Google).
Știu că există pluginuri pentru a adăuga funcționalitatea Google Webfonts la editorul WYSIWYG, dar le încetinesc foarte mult. Voi investiga mai departe și voi vedea dacă există o modalitate ușoară de a adăuga un font sau două.
Marleen
Mulțumesc mult pentru partajare, sunt foarte mulțumit de asta. Sunt un utilizator Genesis și am început să folosesc @import deoarece este deja făcut în foaia de stil. Mă simt mult mai bine în legătură cu această soluție.
La mulți ani 2013!
jeff
În codul dumneavoastră înlocuiesc „FOAIA DE STIL A TEMEI DUMNEAVOASTRĂ” cu ceva??
a mea este STYLE.CSS, sau trebuie să fie un URL??
Mulțumesc,
Jeff
Personal editorial
Da, trebuie să introduceți calea fișierului style.css al temei dvs. acolo.
Admin
Charles
Acesta este ceea ce folosesc...
Adăugați acest lucru în fișierul functions.php al temei dvs.:
/*----------------------------------*/ /* 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');Ce părere aveți despre asta?
Chris Reynolds
Aceasta este metoda CORECTĂ de adăugare a fonturilor Google. Folosiți întotdeauna wp_register_style/wp_enqueue_style
David
Mai bine, adăugați un comentariu condițional pentru a servi fonturile separat pentru IE 7 și 8:
De aici:
http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
Bryan Nickson
Tutoriale bune. Dorea ceva de genul acesta.. Felicitări!!
Peter
Ce zici de opțiunea JS, este o opțiune mai rapidă Sau cea este mai bună?. Mulțumesc
Personal editorial
Metoda din acesta este de departe cea mai recomandată.
Admin
QLStudio
În răspunsul dvs. nu adăugați CSS-ul - este aceasta într-adevăr cea mai bună metodă de a-l adăuga?
Chris
Articol grozav! Cred că ar fi destul de cool dacă WordPress, implicit, ar include fonturile Google, dar asta pare suficient de ușor. Mulțumesc pentru explicație!
Personal editorial
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
Admin
Aaron Crow
Ești grozav, omule! Exact ce căutam! Mulțumesc că ai postat asta… Am căutat o veșnicie să găsesc ceva despre adăugarea asta la tema mea. Mă bucur că am dat peste pagina ta.
Anderson Curry
Postare grozavă și chiar dacă există un plugin pentru a face asta, este întotdeauna mai bine să înveți și metoda fără plugin.
Brad
Deci, evident, nu acceptați utilizarea mai multor pluginuri Google font. În acest caz, va trebui să-mi revizuiesc fișierele css.
sadhu
Nu înțeleg a doua parte, care este adăugarea fontului la funcția de acțiune Genesis... este aceasta o altă metodă de a adăuga fonturi web Google?
și știu că nu trebuie să includem toate stilurile fontului, dar metoda recomandată, care este http://fonts.googleapis.com/css?family=Lora|Oswald
De exemplu, ce se întâmplă dacă vreau doar stilul bold pentru Lora și stilul light pentru Oswald, apoi cum să combin stilurile de font?
mulțumesc
Personal editorial
A doua parte este DOAR pentru utilizatorii Genesis. Dacă nu folosiți Genesis Theme Framework, atunci nu aveți nevoie de acea parte. Pentru a combina stilurile așa cum doriți, iată cum o faceți:
http://fonts.googleapis.com/css?family=Oswald:300|Lora:700
Admin
Anton
Ce ar trebui să fac dacă vreau să folosesc @font-face în Genesis Framework, așa cum ați arătat aici cu Google Webfonts, există vreo soluție pentru asta.
Am căutat toată ziua, deoarece fonturile mele se încarcă incredibil de lent!
Salutări
Gautam Doddamani
tutorial grozav… folosesc de fapt pluginul wp google fonts… ați recomanda acel plugin sau să fac manual, așa cum este descris mai sus.. care este eficient din punct de vedere al performanței?
Personal editorial
Nu am încercat acel plugin. Dar aproape că încercăm să evităm plugin-urile de acest gen, deoarece se poate face mai ușor cu fișierele temei.
Admin
Gautam Doddamani
sweet…thanks will edit my theme instead of using a plugin
Pippin
Evitarea pluginului Google Fonts pentru că este un plugin nu este deloc un motiv bun. Utilizarea pluginului îți oferă de fapt mult mai multă flexibilitate decât includerea lui în tema ta, mai ales dacă vei alege vreodată să schimbi tema.
Personal editorial
Din câte știu eu, fonturile în majoritatea cazurilor sunt considerate elemente stilistice, deci bazate pe temă, și de obicei se schimbă atunci când treceți la o altă temă.
Siddanth Adiga
Postare superbă, căutam asta, doar că încercam să lucrez cu css și fontface. Voi încerca și asta, mulțumesc
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/
Personal editorial
Konstantin, sunt complet de acord cu tine. funcția wp_enqueue_style ar trebui să fie întotdeauna folosită. Asta am încercat să fac prima dată, așa cum a sugerat Nathan Rice, în articolul StudioPress despre Google Fonts. Cu excepția faptului că Google afirmă clar că stilurile fonturilor ar trebui încărcate înainte de orice altceva. Folosind wp_enqueue_style și apoi afișându-le folosind wp_print_styles, acest lucru afișa elementul după ce foaia de stil principală fusese deja încărcată. Acesta a fost motivul pentru care a trebuit să mă conectez la hook-ul genesis_meta(). Oricum, sunt complet de acord cu gândurile tale din articolul tău.
Admin
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
Tutorial excelent. O observație totuși: prima imagine din articol era menită să arate fila @import, nu-i așa?
Personal editorial
Nu, nu trebuia să arate asta.
Admin