Sa artikulo ng tulong sa WordPress na ito, dadalhin kita nang sunud-sunod sa proseso ng pagdaragdag ng mga custom na font sa iyong WordPress Block Themes. Nangangahulugan ito na maaari kang magdagdag ng ANUMANG mga font sa ANUMANG tema, tulad ng pagdaragdag ng Google Font sa Twenty Twenty Three na tema.

Maaari mong panoorin ang video tutorial sa ibaba, o laktawan ito at basahin ang artikulo (na available sa maraming wika gamit ang mga feature ng pagsasalin sa pahinang ito). 

Ipapakita ko sa iyo kung paano gawin ang gawaing ito gamit ang Lumikha ng Block Theme plugin na direktang binuo ng WordPress team ng mga developer. Ginagawa nitong napakagaan, mataas na pagganap, at napakadaling gamitin sa mga tema ng block. Ipapakita ko rin sa iyo kung paano lutasin ang isang karaniwang isyu sa mga pahintulot na maaaring mangyari kapag nagtatrabaho sa plugin na ito.

Sa pamamaraang ito, maaari kang mag-link sa mga font (ibig sabihin, link sa Google Fonts) o mag-embed ng mga font nang lokal sa iyong site (para sa mas mahusay na pagganap ng site). Pasukin natin ito!

Talaan ng nilalaman

1. I-install ang Plugin na "Gumawa ng Block Theme".

Para sa mga panimula, gugustuhin mong mag-log in sa iyong WordPress admin area, na magdadala sa iyo sa Dashboard. Mula doon, pumunta sa Mga Plugin>Magdagdag ng Bago mula sa pangunahing nabigasyon (pulang arrow sa larawan sa itaas).

Hanapin ang plugin na "Gumawa ng Block Theme" gamit ang search bar sa kanang sulok sa itaas (nakabalangkas sa berde sa larawan sa itaas). Sa sandaling lumitaw ang plugin na Lumikha ng Block Theme, i-click ang button na "I-install Ngayon" upang i-install ito sa iyong site (pulang arrow).

Susunod, i-click ang pindutang "I-activate" upang i-activate ang plugin.

Pinasimpleng WordPress: Paano Bumuo ng Makapangyarihang Mga Website na Kurso ng Davies Media Design

2. Huwag paganahin ang Security Plugin (Pansamantala)

Upang ang natitirang bahagi ng prosesong ito ay tumakbo nang maayos, kakailanganin mong pansamantalang huwag paganahin ang anumang mga plugin ng seguridad na iyong na-install na humaharang sa kakayahan ng mga user na mag-edit ng mga tema o plugin.

Sa aking partikular na kaso gumagamit ako ng SG Security plugin (na kasama ng lahat ng mga website ng WordPress hino-host sa pamamagitan ng Siteground – isang host na lubos kong inirerekomenda). Alam kong nakakasagabal ang plugin na ito sa proseso ng pagdaragdag ng mga custom na font, kaya idi-disable ko ang setting na humahadlang.

Sa kasong ito, magna-navigate ako sa seksyong "Seguridad ng Site" ng plugin ng SG Security gamit ang pangunahing nabigasyon (pulang arrow sa larawan sa itaas).

Susunod, mag-scroll ako pababa sa opsyon na may label na "Huwag paganahin ang Mga Tema at Plugin Editor" (naka-highlight sa berde sa larawan sa itaas). Makakakita ka ng toggle sa kanan ng opsyong ito – i-click ang toggle upang huwag paganahin ang feature na ito (pulang arrow). Dapat mong makita ang isang "Tagumpay" na mensahe na pop up sa kanang sulok na asul na arrow).

Sa pansamantalang hindi pinagana ang aming plugin ng seguridad, maaari kaming magpatuloy sa susunod na hakbang ng pagpili at pag-upload ng mga font na gusto naming gamitin sa aming site.

Mayroong dalawang mga pagpipilian para sa paggamit ng mga pasadyang font sa WordPress.

3. Pumili ng Mga Custom na Font para sa WordPress (Mga Naka-link na Google Font)

Ang unang opsyon ay mag-link sa mga font sa isang third-party na site, Google Font. Ang pagpipiliang ito ay mas simple at tumatagal ng mas kaunting oras upang i-set up, ngunit nagpapabagal sa bilis ng pag-load ng pahina ng iyong website. Nililimitahan ka rin nito sa mga font na makukuha mula sa Google Fonts (bagama't nag-aalok ang Google ng napakaraming mahusay, libreng mga font). Kung hindi ka gaanong marunong sa teknolohiya at walang pakialam sa paggamit ng Google Fonts, inirerekomenda ko ang opsyong ito.

Para sa mga nagsisimula, mag-navigate sa "Hitsura> Pamahalaan ang Mga Font ng Tema" mula sa pangunahing nabigasyon (pulang arrow sa larawan sa itaas).

Sa lugar ng trabaho na "Pamahalaan ang Mga Font ng Tema," makikita mo ang lahat ng mga default na font na kasalukuyang naka-install sa WordPress (naka-highlight sa berde sa larawan sa itaas). Nakalista rin ang iyong mga font sa kanang bahagi ng lugar ng trabaho, kasama ang iba't ibang variation ng bawat font at laki ng file para sa bawat variation ng font (nakabalangkas sa asul).

Upang magdagdag ng bagong font sa iyong tema, i-click ang button na “Magdagdag ng Google Font” (pulang arrow).

I-click ang dropdown na “Piliin ang Font” at hanapin ang Google Font na gusto mong idagdag sa iyong site (ang mga font ay nasa alphabetical order). Kung hindi ka sigurado kung ano ang hitsura ng bawat font, inirerekomenda ko nagba-browse sa website ng Google Fonts upang galugarin ang mga font at subukan ang mga ito. Kapag nahanap mo na ang font na gusto mong gamitin, piliin ito mula sa dropdown (asul na arrow).

Makakakita ka na ngayon ng listahan ng lahat ng available na variant na maaari mong i-install sa iyong tema para sa font na iyon. Maaari mong lagyan ng check ang kahon sa tabi ng mga indibidwal na variant, o i-click ang checkbox sa itaas (pulang arrow sa larawan sa itaas) upang piliin ang lahat ng variant. Makakakita ka ng listahan ng iyong mga napiling variant, kasama ang laki ng file ng mga ito, sa kanang bahagi ng screen. Kapag handa ka na, i-click ang "Magdagdag ng mga font ng Google sa iyong tema" (berdeng arrow).

Dapat mo na ngayong makita ang isang mensahe sa tuktok ng lugar ng trabaho na ang font ay na-install sa iyong tema (sa kasong ito sa Twenty-Twenty Three na tema). Pagkatapos ay maaari mong i-click ang link na "Pamahalaan ang Mga Font" sa loob ng kahon ng mensahe ng tagumpay, o i-click ang maliit na arrow sa likod (pulang arrow sa larawan sa itaas) upang bumalik sa lugar ng trabaho na "Pamahalaan ang Mga Font ng Tema".

Makikita mo na ngayon ang iyong bagong naka-install na pamilya ng font na nakalista kasama ng iba pang mga font ng iyong tema (pulang arrow sa larawan sa itaas). Makikita mo rin ang iyong pamilya ng font at lahat ng nauugnay na variation ng font nito sa kanang bahagi ng lugar ng trabaho (naka-highlight sa berde).

4. I-embed ang Mga Custom na Font para sa WordPress (Mga Lokal na Font para sa Mas Magandang SEO)

Ang pangalawang opsyon para sa pagdaragdag ng mga font sa iyong WordPress website ay ang "i-embed" o "lokal na i-host" ang iyong mga font. Sa madaling salita, ang iyong mga font file ay matatagpuan sa loob ng parehong web server na nagho-host sa iyong website.

Ang pakinabang sa pamamaraang ito ay hindi ito nangangailangan ng pagkuha ng mga font mula sa isang third-party na domain. Bilang resulta, ang iyong mga font ay naglo-load nang mas mabilis at sa gayon ang iyong webpage ay naglo-load nang mas mabilis. Ang mas mabilis na paglo-load ng mga webpage ay mas mahusay para sa karanasan ng user, na nangangahulugang makakatulong ito sa iyong site na mas mataas ang ranggo sa mga search engine at makakuha ng mas maraming trapiko.

Sa madaling salita, ang mga naka-embed na font ay mas mahusay para sa SEO (search engine optimization).

Bagama't ang pamamaraang ito ay tumatagal ng ilang karagdagang hakbang, medyo madali pa rin ito at ginagamit ang parehong plugin na na-install namin kanina (Gumawa ng Block Themes plugin).

Upang lokal na i-install ang iyong mga font, magsimula sa pamamagitan ng pag-navigate sa Hitsura>Pamahalaan ang Mga Font ng Tema mula sa pangunahing nabigasyon (kung wala ka pa doon mula sa huling hakbang – asul na arrow sa larawan sa itaas). Susunod, i-click ang button na "Magdagdag ng Lokal na Font" sa kanang sulok sa itaas ng lugar ng trabaho (pulang arrow).

Dadalhin ka sa lugar na "Mga Lokal na Font" kung saan maaari kang pumili ng file mula sa iyong computer na ia-upload sa iyong tema. Sa ilalim ng button na “Pumili ng File” makakakita ka ng listahan ng mga sinusuportahang format ng font file. Makukuha mo ang mga format na ito mula sa anumang website ng pinagkakatiwalaang font, kabilang ang Google Fonts.

Hanapin at I-download ang Iyong Font of Choice mula sa Google Fonts

Pupunta ako sa Google Fonts at gagamitin ang search bar (pulang arrow) upang hanapin ang font na gusto ko – sa kasong ito ang font na “Catamaran”. Kapag ang font ay nakalista sa mga resulta, i-click ko ito upang tingnan ang pahina ng font (berdeng arrow).

Susunod, i-click ko ang button na “I-download ang pamilya” para i-download ang font na ito at lahat ng variation nito sa aking computer. Maaari kang mag-scroll pababa sa pahina ng font kung gusto mong makita ang lahat ng magagamit na mga pagkakaiba-iba para sa font na ito.

I-click ang "I-save" upang i-save ang font zip file sa iyong computer.

I-unzip ang Iyong Font Folder upang I-access ang Mga Font File

Kapag natapos na ang pag-download, i-click ang arrow sa tabi ng natapos na pag-download (pulang arrow) at i-click ang "Ipakita sa folder" (berdeng arrow).

Mag-right-click sa zip file sa iyong file explorer at i-click ang "I-extract Lahat."

May lalabas na pop-up window, na nagpapakita sa iyo kung saan kinukuha ang mga font (pulang arrow). Maaari mong baguhin ang lokasyong ito kung gusto mo, kung hindi, i-click ang button na may label na "I-extract" (berdeng arrow). I-unzip nito ang folder at gagawa ng bagong file sa iyong computer kasama ang lahat ng na-unzip na font file. Dapat awtomatikong bumukas ang folder na ito.

Kung nag-download ka ng mga font file gamit ang Google Fonts, ilagay ang folder na may label na "static" upang tingnan ang lahat ng iyong mga font file. Kung hindi, maghanap lang ng anumang mga file na OTF, TTF, WOFF, o WOFF2 file.

Sa loob ng "static" na folder na ito makikita mo ang isang listahan ng lahat ng mga variation ng font na na-download namin para sa Catamaran font mula sa Google Fonts. Mayroong 9 na variation sa kabuuan, at maaari naming i-upload ang lahat ng ito sa aming website o ang mga variation lang na gusto/kailangan namin. Mag-click sa lokasyon ng folder sa file explorer (berdeng arrow), pagkatapos ay i-right-click at piliin ang "Kopyahin."

I-upload ang Iyong Mga Custom na Font sa WordPress

Mag-navigate pabalik sa WordPress kung saan nakabukas ang "Local Fonts" work area. I-click ang button na “Pumili ng File” (pulang arrow sa larawan sa itaas) upang piliin ang iyong mga font. Maaari kang manu-manong mag-navigate sa lokasyon sa iyong computer kung saan naka-imbak ang iyong mga font. O, i-click lamang ang address bar ng file explorer (asul na arrow), tanggalin ang address na kasalukuyang naroroon, pagkatapos ay i-right-click at piliin ang "I-paste" (berdeng arrow). Ipe-paste nito ang address na kinopya mo sa nakaraang hakbang. Pindutin ang enter key at dadalhin ka sa folder kasama ang iyong mga font.

Kailangan mong i-upload ang iyong mga variation ng font nang paisa-isa. Para sa halimbawang ito, ia-upload ko lang ang variation ng font na "Catamaran-Regular" sa pamamagitan ng pag-click dito (berdeng arrow), pagkatapos ay pag-click sa button na "Buksan" (pulang arrow).

Dapat mo na ngayong makita ang impormasyon para sa "FONT NAME," "FONT STYLE," at "FONT WEIGHT," pati na rin ang isang preview ng font sa kanang bahagi. I-click ang “Mag-upload ng font sa iyong tema” (pulang arrow) para i-upload ang variation ng font.

Tingnan ang Iyong Custom na Mga Font ng Tema

Dapat ka na ngayong makakita ng mensahe ng tagumpay sa tuktok ng lugar ng trabaho (nakabalangkas sa berde sa larawan sa itaas). Binabati kita - ang iyong custom na font ay na-upload na ngayon sa iyong tema bilang isang lokal na font! Maaari mong patuloy na i-click ang "Pumili ng File" at mag-upload ng maraming mga pagkakaiba-iba ng font hangga't gusto mo.

Kapag tapos na, i-click ang link na "Pamahalaan ang Mga Font" sa loob ng kahon ng mensahe ng tagumpay o ang pabalik na arrow (na tinutukoy ng pulang arrow) upang bumalik sa lugar ng trabaho na Pamahalaan ang Mga Font ng Tema.

Makikita mo na ngayon ang bagong pamilya ng font na “Catamaran” na nakalista kasama ng iba pang mga pamilya ng font ng iyong tema (pulang arrow). Dagdag pa, makikita mo ang pamilya ng font at anumang mga variation na iyong na-install sa kanang bahagi ng window na Pamahalaan ang Mga Font ng Tema (naka-highlight sa berde).

5. Baguhin ang Mga Font ng Iyong Tema sa Iyong Mga Custom na Font

Ngayong na-install mo na ang iyong mga bagong font, oras na para sa masayang bahagi!

Upang baguhin ang mga font ng iyong tema sa iyong mga custom na font, mag-navigate sa Site Editor sa pamamagitan ng pagpunta sa Hitsura>Editor (pulang arrow sa larawan sa itaas).

Mag-click saanman sa loob ng pangunahing bahagi ng nilalaman (pulang arrow) ng Site Editor upang ilabas ang mga kontrol.

Sa Nangungunang Menu, mag-click sa icon na "Mga Estilo" (asul na arrow). Pagkatapos, i-click ang "Typography" (pulang arrow).

Sa ilalim ng "Mga Elemento" maaari mong baguhin ang font para sa teksto, mga link, mga heading, o mga pindutan. Pipiliin ko ang opsyong “Mga Heading” para sa halimbawang ito.

Makakakita ka na ngayon ng dropdown sa ilalim ng "Typography" kung saan maaari kang pumili mula sa alinman sa iyong mga font ng tema (pulang arrow). Makikita mo ang mga font na "Neuton" at "Catamaran" na idinagdag ko para sa tutorial na ito ay nakalista dito. Pipiliin ko ang "Neuton" para sa aking heading font.

I-click ang button na “I-save” sa kanang sulok sa itaas para i-save ang iyong mga pagbabago.

I-click ang "I-save" ng isa pang beses (pulang arrow), at ang iyong custom na font ay mase-save na ngayon para sa lahat ng mga heading sa iyong site!

Susunod, maaari mong i-click ang link na View>View Site sa kanang sulok sa itaas ng editor ng site (mga pulang arrow sa larawan sa itaas) upang makita kung ano ang hitsura ng iyong website sa iyong bagong font. Bumalik sa Site Editor at ulitin ang prosesong ito para sa anumang iba pang elemento na ang font ay gusto mong i-customize.

Upang bumalik sa WordPress Admin Area, i-click ang logo sa kaliwang sulok sa itaas ng editor ng site (berdeng arrow), pagkatapos ay i-click muli ang logo.

6. Paano Magtanggal ng Mga Custom na Font mula sa WordPress

Upang tanggalin ang alinman sa iyong mga custom na font, magsimula sa pamamagitan ng pag-navigate pabalik sa Hitsura>Pamahalaan ang Mga Font ng Tema.

Maaari mong tanggalin ang buong pamilya ng font sa pamamagitan ng pag-hover ng iyong mouse sa kanang bahagi ng pangalan ng pamilya ng font at i-click ang icon ng basurahan na lalabas (asul na arrow). O, i-hover ang iyong mouse sa mga indibidwal na variation ng font at i-click ang icon ng basurahan (matatagpuan ang mga variation ng font sa loob ng berdeng naka-highlight na lugar). Maaari mo ring i-click ang link na "Alisin ang Pamilya ng Font" upang tanggalin ang anumang pamilya ng font (purple arrow).

Ito ay para sa tutorial na ito! Kung nagustuhan mo, maaari mong suriin ang aking iba pa Mga Artikulo ng Tulong sa WordPress o mag-enroll sa aking WordPress Masterclass sa Udemy.

Davies Media Design Libreng Creative Apps Email Newsletter

Mag-subscribe sa DMD Newsletter

Mag-sign up para makatanggap ng mga bagong tutorial, update sa kurso, at pinakabagong balita sa iyong mga paboritong libreng creative app!

Matagumpay mo na Naka-subscribe!

Pin ito ng on Pinterest