Kako dodati pisave po meri v WordPressu

Ali želite v WordPress dodati pisave po meri? Pisave po meri omogočajo uporabo lepe kombinacije različnih pisav na vašem spletnem mestu za izboljšanje tipografije in uporabniške izkušnje.


Poleg dobrega izgleda lahko pisave po meri pomagajo tudi pri izboljšanju berljivosti, ustvarjanju slike blagovne znamke in povečanju časa, ki ga uporabniki preživijo na vašem spletnem mestu.

V tem članku vam bomo pokazali, kako lahko dodate pisave po meri v WordPressu z uporabo metode Google Fonts, TypeKit in CSS3 @ Font-Face.

Dodajanje pisav po meri v WordPress

Opomba: Nalaganje preveč pisav lahko upočasni vaše spletno mesto. Priporočamo, da izberete dve pisavi in ​​jih uporabite na svojem spletnem mestu. Pokazali vam bomo tudi, kako jih pravilno naložiti, ne da bi upočasnili vaše spletno mesto.

Preden si pogledamo, kako v WordPressu dodati pisave po meri, si oglejmo iskanje pisav po meri, ki jih lahko uporabite.

Kako najti pisave po meri za uporabo v WordPressu

Pisave so bile včasih drage, vendar ne več. Obstaja veliko krajev za iskanje odličnih brezplačnih spletnih pisav, kot so Google Fonts, Typekit, FontSquirrel in fonts.com.

Če ne veste, kako mešati in se ujemati s pisavami, poskusite s Font Pair. Oblikovalcem pomaga združevati čudovite Googlove pisave skupaj.

Ko izbirate pisave, ne pozabite, da bo uporaba preveč pisav po meri upočasnila vaše spletno mesto. Zato morate izbrati dve pisavi in ​​jih uporabljati skozi celotno zasnovo. To bo prineslo tudi doslednost vašemu dizajnu.

Video vadnica

Naročite se na WPBeginner

Če vam video ni všeč ali vam je bolj všeč pisni vodnik, preberite nadaljevanje.

Dodajanje pisav po meri v WordPress iz Google Fonts

Predogled Googlovih pisav

Google Fonts je največja, brezplačna in najpogosteje uporabljena knjižnica pisav med razvijalci spletnih strani. Na WordPress lahko dodate in uporabljate Google Pisave na več načinov.

1. način: Dodajanje pisav po meri z uporabo vtičnika Easy Google Fonts

Če želite na svojem spletnem mestu dodati in uporabiti Googlove pisave, je ta metoda daleč najlažja in priporočljiva za začetnike.

Prvo, kar morate storiti, je namestiti in aktivirati vtičnik Easy Google Fonts. Za več podrobnosti glejte naš korak za korakom navodila za namestitev vtičnika WordPress.

Po aktivaciji lahko greste na Videz »Customizer stran. To bo odprlo vmesnik za prilagajanje tem v živo, kjer boste videli nov razdelek Tipografija.

Tipografija uporabnika

Če kliknete Tipografija, boste prikazali različne odseke svojega spletnega mesta, kjer lahko uporabite Google Pisave. Pod razdelkom, ki ga želite urediti, preprosto kliknite »Uredi pisavo«.

Nastavitve tipografije

V razdelku o družini pisav lahko na svojem spletnem mestu izberete katero koli Googlovo pisavo. Izberete lahko tudi slog pisave, velikost pisave, oblazinjenje, rob in drugo.

Glede na vašo temo je število razdelkov tukaj lahko omejeno in morda ne boste mogli neposredno spremeniti izbire pisav za različna področja vašega spletnega mesta.

Če želite to popraviti, vam vtičnik omogoča tudi ustvarjanje lastnih kontrol in njihovo uporabo za spreminjanje pisav na vašem spletnem mestu.

Najprej morate obiskati Nastavitve »Google Pisave strani in vnesite ime za nadzor pisave. Uporabite nekaj, kar vam pomaga hitro razumeti, kje boste uporabljali ta nadzor pisave.

Oddelek za nadzor pisave

Nato kliknite gumb ‘Ustvari nadzor pisave’ in nato boste morali vnesti izbirnike CSS.

Dodate lahko elemente HTML, na katere želite ciljati (na primer h1, h2, p, blokirno zapisovanje) ali uporabite razrede CSS.

S pomočjo orodja Inspect v svojem brskalniku lahko ugotovite, katere razrede CSS uporablja določeno področje, ki ga želite spremeniti.

Dodajte izbirnike CSS

Zdaj kliknite gumb “Shrani nadzor nad pisavo”, da shranite svoje nastavitve. Za različne odseke svojega spletnega mesta lahko ustvarite toliko krmilnikov pisav.

Če želite uporabljati te krmilnike pisav, se morate vrniti na Videz »Customizer in kliknite na zavihek Tipografija.

V razdelku Tipografija boste zdaj videli tudi možnost »Tema tipografija«. S klikom nanj se prikažejo vaši elementi krmiljenja po meri, ki ste jih ustvarili prej. Zdaj lahko samo kliknete gumb za urejanje, da izberete pisave in videz tega elementa.

Možnost tipografije teme

Ne pozabite klikniti gumba za shranjevanje ali objavo, da shranite spremembe.

2. način: Ročno dodajte Google pisave v WordPress

Ta metoda zahteva, da v svoje teme WordPress dodate kodo. Če tega še niste storili, si oglejte naš vodnik o kopiranju in lepljenju kode v WordPressu.

Najprej obiščite knjižnico Googlovih pisav in izberite pisavo, ki jo želite uporabiti. Nato kliknite gumb za hitro uporabo pod pisavo.

Izberite sloge pisav, ki jih želite uporabiti

Na strani pisave boste videli sloge, ki so na voljo za to pisavo. Izberite sloge, ki jih želite uporabiti v svojem projektu in nato kliknite gumb na stranski vrstici na vrhu.

Pridobite povezavo za vdelavo pisave

Nato boste morali preklopiti na zavihek »Vdelati« na stranski vrstici, če želite kopirati vdelano kodo.

Obstajata dva načina, kako to kodo dodati na svoje WordPress spletno mesto.

Najprej lahko preprosto uredite datoteko header.php teme in prilepite kodo pred oznako.

Če pa niste seznanjeni z urejanjem kode v WordPressu, lahko s pomočjo vtičnika dodate to kodo.

Preprosto namestite in aktivirajte vtičnik Insert Headers and Footers. Za več podrobnosti glejte naš korak za korakom navodila za namestitev vtičnika WordPress.

Po aktivaciji pojdite na Nastavitve »Vstavite glave in noge strani in prilepite kodo za vdelavo v polje »Skripti v glavi«.

Na spletno mesto WordPress dodajte kodo pisave

Ne pozabite klikniti gumba Shrani, da shranite spremembe. Vtičnik bo zdaj začel nalagati vdelano kodo Google Font na vse strani vašega spletnega mesta.

To pisavo lahko uporabite v tabeli slog teme, kot je ta:

.h1 naslov spletnega mesta {
družina pisav: ‘Open Sans’, Arial, sans-serif;
}

Za podrobnejša navodila glejte naš vodič o dodajanju Googlovih pisav v WordPress teme.

Dodajanje pisav po meri v WordPress z uporabo Typekita

Typekit Adobe Fonts

Typekit Adobe Fonts je še en brezplačen in vrhunski vir za čudovite pisave, ki jih lahko uporabite pri svojih oblikovalskih projektih. Imajo plačano naročnino, kot tudi omejen brezplačen načrt, ki ga lahko uporabljate.

Preprosto se prijavite za račun Adobe Fonts in obiščite razdelek o brskalnih pisavah. Od tu morate klikniti gumb, da izberete pisavo in ustvarite projekt.

Projektu dodajte pisavo typekit

Nato boste videli vdelano kodo z vašim ID-jem projekta. Pokazal vam bo tudi, kako uporabljati pisavo v CSS-ju svoje teme.

To kodo morate kopirati in prilepiti znotraj razdelka svojega spletnega mesta.

Koda vdelave pisave Typekit

Obstajata dva načina, kako to kodo dodati na svoje WordPress spletno mesto.

Najprej lahko preprosto uredite datoteko header.php teme in prilepite kodo pred oznako.

Če pa niste seznanjeni z urejanjem kode v WordPressu, lahko s pomočjo vtičnika dodate to kodo.

Preprosto namestite in aktivirajte vtičnik Insert Headers and Footers.

Po aktivaciji pojdite na Nastavitve »Vstavite glave in noge strani in prilepite kodo za vdelavo v polje »Skripti v glavi«.

Dodajanje Typekita s strani Adobe Fonts v WordPress

To je vse, zdaj lahko uporabite pisavo Typekit, ki ste jo izbrali v tabeli stilov teme WordPress:

h1 .site-naslov {
družina pisav: gilbert, sans-serif;
}

Za podrobnejša navodila si oglejte našo vadnico, kako v programu WordPress dodati Typografijo s pomočjo Typekita.

Dodajanje pisav po meri v WordPress z uporabo CSS3 @ font-face

Najbolj neposreden način dodajanja pisav po meri v WordPress je dodajanje pisav po metodi CSS3 @ font-face. Ta metoda vam omogoča, da na svoji spletni strani uporabite katero koli pisavo, ki vam je všeč.

Najprej morate v spletno obliko prenesti pisavo, ki vam je všeč. Če za svojo pisavo nimate spletne oblike, jo lahko pretvorite s pomočjo generatorja FontSquirrel Webfont.

Ko imate datoteke webfont, jih boste morali naložiti na strežnik gostovanja WordPress.

Najboljše mesto za nalaganje pisav je znotraj nove mape s pisavami v imeniku teme ali otroške teme.

Za nalaganje pisave lahko uporabite FTP ali upravitelja datotek svojega cPanela.

Ko naložite pisavo, morate v tabelo slogi teme naložiti pisavo z uporabo pravila CSS3 @ font-face, kot je to:

@ font-obraz {
družina pisav: Arvo;
src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
teža pisave: običajna;
}

Ne pozabite zamenjati družine pisav in URL-ja s svojimi.

Po tem lahko uporabite to pisavo kjer koli v tabeli stilov teme, kot je ta:

.h1 naslov spletnega mesta {
družina pisav: "Arvo", Arial, sans-serif;
}

Nalaganje pisav neposredno s pomočjo CSS3 @ font-face ni vedno najboljša rešitev. Če uporabljate pisavo iz Googlovih pisav ali Typekita, je najbolje, da za optimalno delovanje pišete pisavo neposredno z njihovega strežnika..

To je vse, upamo, da vam je ta članek pomagal dodati Wordove pisave po meri. Morda boste želeli preveriti tudi naš vodič o tem, kako uporabljati pisave ikon v WordPressu in kako spremeniti velikost pisave v WordPressu.

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