Perasan tak bila kita bukak blog kita atau blog lain, agak delayed masa untuk font yang kita set tu muncul? Tak kira waktu tu line Internet laju ke lambat ke, memang akan ada delay. Yang muncul mula-mula ialah default font yang kita set kat bahagian CUSTOMIZE. Font pilihan kita? Lambat. Aku pun jadi detektif jap siasat masalah ni. Rupanya baru aku tahu, ada trick yang kita boleh buat nak bagi font pilihan kita tu muncul cepat.
Cara buat font muncul dengan cepat
- Pergi ke web Google Fonts: https://fonts.google.com.
- Search font yang berkenan. Macam kes aku, aku pilih Grandstander.
- Pilih condition font yang sesuai. Aku pilih Regular.
- Copy <link> dalam kotak biru tu.
- Pergi ke Blogger > Theme > Backup. In case ada problem, kena back up dulu.
- Klik Edit HTML.
- Search <head> dan paste kod tu kat bawah <head>.
- Sini penting, ada beberapa kod yang kena edit dulu.
Kod asal:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Grandstander&display=swap" rel="stylesheet">
Selepas edit:
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=''/>
<link href="https://fonts.googleapis.com/css2?family=Grandstander&display=swap" rel="stylesheet"/>
Nampak beza kan?
- Aku tambah ='' selepas crossorigin.
- Aku tambah / kat hujung setiap kod.
- Aku tukar simbol & kepada & dalam kod ke-3.
- Pergi ke page Google Fonts tadi dan copy kod CSS untuk font tu.
- Masuk balik dalam Edit HTML dan paste kat setiap bahagian perlu ditukar font serta (wajib) copy kod bawah ni dan paste kat atas setiap CSS font tu.
font-display: swap;
- Klik Save.
Aku anggap ni teknologi baru dari Google yang aku terlepas pandang. Sebelum ni memang aku perasan ada teknik macam ni. Dan aku tak ambil port. Tapi bila baca penjelasan panjang lebar dari blog Sia Karamalegos ni, baru aku tahu pentingnya guna setting ni. Kalau tak, mereput lah nak tunggu font tu loading. Lepas buat setting ni, memang font kat blog aku cepat je muncul, tak macam dulu.
25 Comments
tak pandai dengan coding ni. tu yang tak mahu sentuh bahagian coding tu, takut tersalah buat, langsung tak tau nak perbetulkan
ReplyDeleteSlow-slow belajar. Dulu saya pun takut nak kacau coding. Lama-lama baru berani.
Deletenakk check dkt coding ni pun takut takut salah tekan ke apa kan heeee
ReplyDeleteKena sentiasa back up sebelum masuk part coding. Belajar buat yang simple dulu. 😀
DeleteDulu akak serabut tengok coding ni, tapi bila dah terbiasa jadi macam seronok pulak 😁.Mekaseh share tips.
ReplyDeleteKann. Susunan coding blog saya pun berterabur. Nanti ada masa kena kemaskan balik.
Deletecanggihnye
ReplyDeleteTerima kasih. 😀
Deletesekali imbas nampak tajuknya cara buat duit cepat muncul. laju laju klik...menarik sungguh tajuknya... sekali baca elok elok...Font rupanya... kepala asik fikir duit aje ni...hahaha
ReplyDeleteAlamak! Tergelak saya. 🤣🤣🤣
DeleteMaksudnya kannn, kena copy paste dua benda lah kan?
ReplyDeletefont-display: swap;
font-family: 'Port Lligat Slab', serif;
dekat setiap bahagian yang perlu tukar font kann?
(contoh font yang saya pilih hehehe)
Betul. Tepat sekali. 👍
DeleteOkey maceh! Boleh tryyyyy sebab dah boring guna font sekarang ni hahaha.
DeleteHaritu try font lain, tengok dekat laptop kita ni okey je. Tapi bila orang lain buka blog kita, font jadi lain. Macam setting lain pulakkkkk.
Tk perkongsian ilmunya
ReplyDeleteSama-sama. 👍
DeleteBagus trick ni. cepat sikit loading font pilihan kita. Pernah juga buat tutorial tukar font dalam blog. Dah kurang familiar dengan coding blog ni. Good sharing anyway :)
ReplyDeleteSama-sama. Dulu-dulu memang zaman tutorial. Sekarang tak ramai blogger kita yang buat tutorial dah.
Deletemenarik..dah fdollow ya
ReplyDeleteTerima kasih. 😀
DeleteBola Katok kerja programmer, ye? Pandai edit html ye. Terima kasih, kerana berkongsi ilmu dengan kami. :)
ReplyDeleteNak kata programmer tu tak jugak. Just suka customize blog. Tu tau jugak pasal coding ni. 😅
DeleteAkak bab-bab ni memang fail. Tengok coding berbaris-baris tu, tak sampai 5 saat terus pening :)
ReplyDeleteAwal-awal memang saya pening jugak. Berpinar mata. Tapi just buat coding simple macam tukar background dsb dulu. Nanti lama-lama terbiasa. 💪
Deletecustomize font untuk setiap entry ni tak belajar lagi. Tengok ada gak blogger lain entry lain font. antilah baru belajar
ReplyDeleteAda masa nanti boleh belajar. No worries. 👍
Delete