Macam yang saya ceritakan dalam entri sebelum ni, Claude ajar cara tambah font baru yang tak tersenarai di tempat Customize tu, yang tak disediakan oleh template blog kita.
Jadi, ada 3 langkah utama:
- Cari font di Google Fonts.
- Import masuk ke template HTML blog kita.
- Masukkan CSS rule yang akan apply-kan font tu.
- Ubah saiz font (optional, tak penting).
$ads={1}
Langkah 1:
Ok mula-mula, carilah font apa yang korang suka di fonts.google.com. Klik font tu dan dia akan preview gaya font. Dalam tu, korang akan nampak butang "Get font'. Klik butang tu.
Lepas tu korang akan sampai ke page macam dalam gambar bawah. Pastikan dia kata "1 font family selected", bukan 2, 3 atau berapa pun. Kalau lebih, klik saja icon tong sampah untuk buangkan. Nama font ada tertulis di situ.
Klik pada butang "Get embed code".
Di page "Embed code" ni, cari dan klik pada "@import". Lepas tu select dan highlight teks panjang di bawahnya. Rujuk pada gambar bawah ni. Salin/Copy.
.webp)
Saya tak pasti <style> dan </style> perlu di-copy juga ataupun tak. Yang saya dah buat, tak perlu dua-dua tu.
(NOTA: Kita akan kembali semula ke sini untuk langkah 3 nanti.)
Langkah 2:
Pergi ke bahagian Customize dan klik Edit HTML (tekan segitiga kecil dulu).
Dalam tu, cuba cari bahagian yang berkaitan font di bahagian awal template (kawasan atas). Untuk template blog yang saya guna ni, dia ada tunjuk macam gambar di bawah. Saya letak teks "@import" di situ.
Kalau ada jumpa, paste-kan teks @import yang dah disalin tadi.
Kalau tak jumpa, korang cuba buat sendiri.
Contohnya, tulis
/*-- Bawah ni font dari Google --*/ dan letak teks @import
korang di bawahnya.
Berdasarkan apa yang Claude kata, yang penting ialah teks @import tu mesti di bahagian awal template sebelum apa-apa CSS rules, selepas <b:skin><![CDATA[.
Langkah 3:
Kemudian, tekan ctrl+f dan cari teks di bawah:
(pastikan klik di
mana-mana dalam ruang HTML tu dulu sebelum tekan ctrl+f)
]]></b:skin>
Rujuk gambar di bawah.
![]]></b:skin>](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmcNwwmS1msds_V9RhIe1smNPfEkNv0Klx-9QJOYTEX9VjHGb16KPLUi_wke4-8VAEvM1TTNTGzpiJJO4j92AdCv4OKFmKTWrdTZKZLgwLY0mJ9hLLMvXl_CgVYu7JvEQ19bPOvsKqPZTzKa0fxhcSKBAkJ1FU8KZ_SwjARaGattiH_JIZJrQ66kpLGGQ/s800/cari%20teks%20dalam%20template%20blog.webp)
Dah jumpa? Ok, kita tinggalkan sekejap dan kembali ke Embed code tadi. Di bahagian bawah "@import", tengok "font-family" font korang.
Contoh macam dalam gambar bawah:
font-family: "Inter", sans-serif;
Jadi untuk blog saya, saya masukkan kod CSS#post-body {font-family: "Inter", sans-serif;}
SEBELUM]]></b:skin> tadi.
Masukkanlah CSS korang punya font:
#post-body {font-family: "?????";
?????;}
Lepas tu tekan Save.
Langkah 4:
Kalau nak ubah saiz, masukkan "font-size" ke dalam kod CSS tadi. Contoh:
#post-body {font-family: "Inter", sans-serif; font-size: 16px;}Atau ubah di bahagian Customize. Situ pun boleh.
$ads={2}