Kā pievienot Google Web fontus WordPress motīvos “Pareizi”

Google fonti ir pārsteidzošs bezmaksas resurss tīmekļa dizaineriem. WPBv4 mēs esam sākuši izmantot populāro Google fontu kombināciju: Oswald un Lora. Daži no mūsu lietotājiem ir jautājuši mums, kā WordPress motīvos pievienot Google Web fontus. Ja atceraties, mēs parādījām, kā pievienot Google fontus WordPress ziņu redaktorā. Šajā rakstā mēs jums parādīsim, kā pievienot Google Web fontus WordPress tēmām Pareizais ceļš, optimizēta veiktspējai.


Atrodiet sev tīkamos Google Web fontus

Pirmā lieta, kas jums jādara, ir atrast sev tīkamu Google fontu. Dodieties uz Google fontiem un pārlūkojiet bibliotēku. Kad esat atradis fontu, kas jums patīk, noklikšķiniet uz “Ātra lietošana” pogu.

Ātri izmantojiet Google Fontu fontus

Kad esat noklikšķinājis uz ātrās lietošanas pogu, jūs tiksit atvērts jaunā lapā. Ritiniet uz leju, līdz tiek parādīts lietošanas instrukcijas lodziņš ar kodu, ko varat pievienot savai vietnei.

Google fontu iegulšanas kods

Jūs redzēsit, ka fonta pievienošanai vietnei ir trīs dažādas cilnes. Pirmais ir standarta un ieteiktā metode Google fontu pievienošanai savai vietnei. Otrajā cilnē tiek izmantota metode @import CSS, bet pēdējā cilnē tiek izmantota JavaScript metode.

Mēs parādīsim, kā izmantot katru no šīm metodēm un kādi ir plusi un mīnusi.

Video apmācība

Abonējiet vietni WPBeginner

Ja videoklips jums nepatīk vai jums ir nepieciešami vairāk norādījumu, turpiniet lasīt.

Google Web fontu pievienošana WordPress motīvos

Mēs galvenokārt esam redzējuši ļaudis, izmantojot pirmās divas metodes.

Vienkāršākais veids ir atvērt savu motīvu stils.css ierakstiet un ielīmējiet cilnē @import iegūto fontu kodu, piemēram:

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

Varat arī apvienot vairākus fontu pieprasījumus vienā. Kā jūs to izdarītu, rīkojieties šādi:

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

Šī metode ir ļoti vienkārša, taču tas nav labākais veids, kā pievienot Google fontus savai WordPress vietnei. Izmantojot @import metodi, tiek bloķētas paralēlas lejupielādes, kas nozīmē, ka pārlūks gaidīs, kamēr importētais fails būs beidzis lejupielādi, pirms sāks lejupielādēt pārējo saturu..

Ja jums OBLIGĀTI jālieto @import, tad vismaz apvienojiet vairākus pieprasījumus vienā.

Uz veiktspēju optimizēta Google Web fontu pievienošanas metode

Labākais Google fontu pievienošanas veids ir standarta metode, kas importēšanas metodes vietā izmanto saišu metodi. Vienkārši paņemiet sava fonta URL, ko saņēmāt no 1. darbības. Ja pievienojat vairākus fontus, šos abus fontus varat apvienot ar | raksturs. Pēc tam ievietojiet kodu motīva galvas sadaļā.

Jums, visticamāk, būs jārediģē fails header.php un virs galvenās stilu lapas jāielīmē šāds kods. Piemērs izskatās šādi:

Būtībā mērķis ir pēc iespējas ātrāk iesniegt fonta pieprasījumu. Saskaņā ar emuāru Google Web Fonts, ja pirms @ font-face deklarācijas ir skripta tags, tad Internet Explorer neko lapā neizveidos, kamēr fonta fails nebūs lejupielādēts.

Kad esat to izdarījis, varat vienkārši sākt to izmantot motīva CSS failā šādi:

h1 {
fontu saime: ‘Oswald’, Helvetica, Arial, serif;
}

Tagad tur ir daudz tēmu ietvaru un bērnu tēmu. Nav ieteicams vecāku motīvu failus modificēt īpaši, ja izmantojat motīvu ietvaru, jo nākamreiz, kad atjaunināsit šo ietvaru, jūsu izmaiņas tiks ignorētas. Lai pareizi pievienotu Google fontus bērnu motīvos, jums būs jāizmanto āķi un filtri, kurus jums parādīja šī vecāka tēma vai ietvars..

Pareizi izmantojot Google fontus WordPress

Vēl viens veids, kā pievienot Google fontus savai WordPress vietnei, ir, ierakstot fontu motīva function.php failā vai vietnei specifiskā spraudnī..

funkcija wpb_add_google_fonts () {

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

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Neaizmirstiet aizstāt fonta saiti ar savu.

Google fontu ielāde, izmantojot JavaScript

Lai izmantotu šo metodi, kods būs jākopē JavaScript cilnē Google fontu lietošanas instrukciju sadaļā. Šo kodu varat ielīmēt motīvā vai bērna motīva header.php failā tūlīt pēc taga.

Mūsu pēdējais padoms par Google Web Fontu izmantošanu jūsu vietnē būtu neielādēt fontus, kurus jūs neizmantojat. Piemēram, ja vēlaties tikai treknu un normālu svaru, nepievienojiet visus pārējos stilus.

Mēs ceram, ka šis raksts palīdzēja jums pareizi pievienot Google Web fontus WordPress motīvos, lai jūsu vietne varētu ātri ielādēt. Varat arī apskatīt mūsu ceļvedi par Typekit fontu pievienošanu WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me