Paano Magdagdag ng Mga Google Web Font sa Mga Tema ng WordPress ang “Tama” na paraan

Ang mga font ng Google ay kamangha-manghang libreng mapagkukunan para sa mga web designer. Sa WPBv4, nagsimula kaming gumamit ng isang tanyag na kumbinasyon ng Google Font: Oswald at Lora. Ang ilan sa aming mga gumagamit ay tinanong sa amin kung paano magdagdag ng mga font ng Web ng Google sa mga tema ng WordPress. Kung naaalala mo, ipinakita namin kung paano magdagdag ng mga font ng Google sa WordPress Post Editor. Sa artikulong ito, ipapakita namin sa iyo kung paano idagdag ang mga Google Web Font sa iyong mga tema ng WordPress Tamang paraan, na-optimize para sa pagganap.


Hanapin ang mga Google Web Font na gusto mo

Ang unang bagay na kailangan mong gawin ay makahanap ng isang font ng Google na gusto mo. Tumungo sa mga font ng Google at mag-browse sa library. Kapag nahanap mo ang font na gusto mo, mag-click sa “Mabilis na paggamit” pindutan.

Mabilis na paggamit ng mga font mula sa Google Font

Kapag na-click mo ang pindutan ng mabilis na paggamit, dadalhin ka sa isang bagong pahina. Mag-scroll pababa hanggang makita mo ang kahon ng pagtuturo ng paggamit gamit ang code na maaari mong idagdag sa iyong website.

Naka-embed ang code ng Google font

Makikita mo na mayroong tatlong magkakaibang mga tab para sa pagdaragdag ng font sa iyong site. Ang una ay ang pamantayan at inirekumendang pamamaraan upang magdagdag ng mga font ng Google sa iyong site. Ang pangalawang tab ay gumagamit ng paraan ng @import CSS, at ang huling tab ay gumagamit ng pamamaraan ng JavaScript.

Ipapakita namin sa iyo kung paano gamitin ang bawat isa sa mga pamamaraan na ito at kung ano ang mayroong mga kalamangan at kahinaan.

Tutorial ng Video

Mag-subscribe sa WPBeginner

Kung hindi mo gusto ang video o nangangailangan ng higit pang mga tagubilin, pagkatapos ay magpatuloy sa pagbabasa.

Pagdaragdag ng Mga Google Web Font sa Mga Tema ng WordPress

Karamihan sa amin ay nakakakita ng mga tao na gumagamit ng unang dalawang pamamaraan.

Ang pinakamadaling paraan ay upang buksan ang iyong tema style.css file at i-paste ang mga code ng font na nakuha mo sa tab na @import, tulad nito:

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

Maaari mo ring pagsamahin ang maraming mga kahilingan sa font sa isa. Narito kung paano mo ito gagawin:

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

Ang pamamaraang ito ay napakadali ngunit hindi ito ang pinakamahusay na paraan upang magdagdag ng mga font ng Google sa iyong WordPress site. Gamit ang mga bloke ng pamamaraan ng @import na humahambing sa mga pag-download, na nangangahulugang maghihintay ang browser na matapos ang pag-download ng file bago ito magsimulang mag-download ng natitirang nilalaman.

Kung DAPAT kang gumamit ng @import, pagkatapos ay hindi bababa sa pagsamahin ang maraming mga kahilingan sa isa.

Pamamaraan na na-optimize ng Pagganap ng Pagdaragdag ng Mga Font ng Google Web

Ang pinakamahusay na paraan ng pagdaragdag ng mga font ng Google ay sa pamamagitan ng paggamit ng Pamantayang pamamaraan na gumagamit ng paraan ng pag-link sa halip na paraan ng pag-import. Kunin lamang ang iyong URL ng font na nakuha mo mula sa hakbang 1. Kung nagdaragdag ka ng maraming mga font, maaari mong pagsamahin ang dalawang mga font na may | pagkatao. Pagkatapos ay ilagay ang code sa seksyon ng ulo ng iyong tema.

Malamang na kailangan mong i-edit ang iyong header.php file, at i-paste ang sumusunod na code sa itaas ng iyong pangunahing styleheet. Ang halimbawa nito ay magiging ganito:

Karaniwan ang layunin ay upang ilagay ang kahilingan ng font nang mas maaga. Ayon sa blog ng Google Web Font, kung mayroong isang tag ng script bago ang deklarasyon ng @ font-face, pagkatapos ay hindi bibigyan ng Internet Explorer ang anumang pahina hanggang sa magawa na ang pag-download ng font file.

Kapag nagawa mo na iyon, maaari mo lamang simulan ang paggamit nito sa CSS file ng iyong tema tulad nito:

h1 {
font-family: ‘Oswald’, Helvetica, Arial, serif;
}

Ngayon ay may maraming mga tema frameworks at mga tema ng bata doon. Hindi inirerekumenda na baguhin ang mga file ng tema ng iyong magulang lalo na kung gumagamit ka ng isang balangkas ng tema dahil ang iyong mga pagbabago ay mapapansin sa susunod na mai-update mo ang balangkas na iyon. Kailangan mong magamit ang mga kawit at mga filter na ipinakita sa iyo ng tema ng balangkas ng magulang na iyon upang magdagdag ng maayos na mga font ng Google sa mga tema ng iyong anak.

Wastong Enqueuing Mga Font ng Google sa WordPress

Ang isa pang paraan upang magdagdag ng mga font ng Google sa iyong WordPress site ay sa pamamagitan ng pag-enqueuing ng font sa mga function.php file ng iyong tema o isang tukoy na plugin ng site.

gumana wpb_add_google_fonts () {

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

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Huwag kalimutang palitan ang iyong link sa font.

Naglo-load ng Mga Font ng Google Gamit ang JavaScript

Para sa pamamaraang ito kakailanganin mong kopyahin ang code sa tab na JavaScript sa seksyong tagubilin sa paggamit ng mga font ng Google. Maaari mong i-paste ang code na ito sa header.php file ng tema ng bata o kaagad pagkatapos ng tag.

Ang aming huling tip sa paggamit ng mga Google Web Font sa iyong site ay ang hindi mai-load ang mga font na hindi mo ginagamit. Halimbawa, kung nais mo lamang ang naka-bold, at normal na timbang, huwag idagdag ang lahat ng iba pang mga estilo.

Inaasahan namin na nakatulong sa iyo ang artikulong ito ng mga Google Web Font sa iyong mga tema ng WordPress sa tamang paraan, upang mabilis na mai-load ang iyong site. Maaari mo ring suriin ang aming gabay sa kung paano magdagdag ng mga typekit font sa WordPress.

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