Kako v prave WordPress teme dodati Googlove spletne pisave na pravilen način

Googlove pisave so neverjetni brezplačni vir za spletne oblikovalce. V WPBv4 smo začeli uporabljati priljubljeno kombinacijo Google Font: Oswald in Lora. Nekateri naši uporabniki so nas vprašali, kako v teme WordPress dodati spletne Googlove pisave. Če se spomnite, smo pokazali, kako lahko dodate Googlove pisave v urejevalniku WordPress Post. V tem članku vam bomo pokazali, kako v svoje WordPress teme dodate Googlove spletne pisave Prava pot, optimiziran za delovanje.


Poiščite Googlove spletne pisave, ki so vam všeč

Najprej morate najti Googlovo pisavo, ki vam je všeč. Pojdite na Googlove pisave in brskajte po knjižnici. Ko najdete pisavo, ki vam je všeč, kliknite na “Hitra uporaba” gumb.

Hitro uporabo pisav iz Google Fonts

Ko kliknete gumb za hitro uporabo, boste preusmerjeni na novo stran. Pomaknite se navzdol, dokler ne vidite polja z navodili za uporabo s kodo, ki jo lahko dodate na svoje spletno mesto.

Google vdelana koda pisave

Videli boste, da obstajajo trije različni zavihki za dodajanje pisave na vaše spletno mesto. Prva je standardni in priporočen način za dodajanje Googlovih pisav na vaše spletno mesto. Drugi jeziček uporablja metodo @import CSS, zadnji jeziček pa uporablja metodo JavaScript.

Pokazali vam bomo, kako uporabiti vsako od teh metod in kakšne so prednosti in slabosti.

Video vadnica

Naročite se na WPBeginner

Če vam video ni všeč ali potrebujete več navodil, nadaljujte z branjem.

Dodajanje Googlovih spletnih pisav v teme WordPress

Ljudje smo večinoma videli prve dve metodi.

Najlažji način bi bilo, da odprete teme svoje teme style.css datoteko in prilepite kodo pisav, ki ste jo dobili na zavihku @import, kot je ta:

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

Prav tako lahko združite več zahtev za pisavo v eno. Tukaj je to, kako bi to storili:

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

Ta metoda je zelo enostavna, vendar ni najboljši način za dodajanje Googlovih pisav na vaše WordPress spletno mesto. Uporaba metode @import blokira vzporedne prenose, kar pomeni, da bo brskalnik počakal, da se uvožena datoteka konča s prenosom, preden začne prenašati preostalo vsebino.

Če MORATE uporabiti @import, vsaj združite več zahtev v eno.

Način, optimiziran za uspešnost dodajanja Googlovih spletnih pisav

Najboljši način dodajanja Googlovih pisav je uporaba metode Standard, ki uporablja način povezave namesto načina uvoza. Preprosto vzemite URL pisave, ki ste ga dobili iz 1. koraka. Če dodate več pisav, lahko obe pisavi združite z | lik. Nato kodo postavite v razdelek glave teme.

Najverjetneje boste morali urediti datoteko header.php in naslednjo kodo prilepiti nad glavno tabelo slogov. Primer bi bil videti takole:

V osnovi je cilj, da prošnjo za pisavo postavimo čim prej. Po spletnem dnevniku Google Web Fonts, če je oznaka skripta pred deklaracijo @ font-face, Internet Explorer ne bo ničesar prikazal na strani, dokler se datoteka datotek ne naloži..

Ko to storite, ga lahko preprosto začnete uporabljati v datoteki CSS svoje teme, kot je ta:

h1 {
družina pisav: ‘Oswald’, Helvetica, Arial, serif;
}

Zdaj je veliko tematskih okvirov in otroških tem. NE priporočamo, da datoteke svojih nadrejenih tem posebej spreminjate, če uporabljate tematski okvir, ker bodo vaše spremembe nadomeščene ob naslednji posodobitvi tega okvira. Za pravilno dodajanje Googlovih pisav v otroške teme boste morali uporabiti trnke in filtre, ki vam jih je predstavila ta nadrejena tema ali okvir..

Pravilno pridobivanje Googlovih pisav v WordPressu

Drug način za dodajanje Googlovih pisav na vaše WordPress spletno mesto je tako, da vnesete pisavo v funkcijo svoje teme.php ali vtičnik, ki je določen za spletno mesto.

funkcija wpb_add_google_fonts () {

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

dodajanje (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Ne pozabite, da povezavo pisave zamenjate s svojo.

Nalaganje Googlovih pisav s JavaScript

Za to metodo boste morali kopirati kodo na zavihek JavaScript v razdelku z navodili za uporabo Googlovih pisav. To kodo lahko prilepite v datoteko header.php teme ali teme otroške teme takoj za oznako.

Naš zadnji nasvet o uporabi Googlovih spletnih pisav na vašem spletnem mestu bi bil, da ne nalagate pisav, ki jih ne boste uporabljali. Na primer, če želite samo krepko in normalno težo, ne dodajte vseh drugih slogov.

Upamo, da vam je ta članek pomagal, da v svoje teme WordPress dodate Googlove spletne pisave na pravi način, da se bo vaše spletno mesto hitro naložilo. Morda boste želeli preveriti tudi naš vodič o dodajanju pisav Typekit v 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