What's up?

  • run

    HOME

Custom font lambat muncul? Ini cara nak bagi cepat.


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
  1. Pergi ke web Google Fonts: https://fonts.google.com.
  2. Search font yang berkenan. Macam kes aku, aku pilih Grandstander.
  3. Pilih condition font yang sesuai. Aku pilih Regular.
  4. Copy <link> dalam kotak biru tu.
  5. Pergi ke Blogger > Theme > Backup. In case ada problem, kena back up dulu.
  6. Klik Edit HTML.
  7. Search <head> dan paste kod tu kat bawah <head>.
  8. 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&amp;display=swap" rel="stylesheet"/>

Nampak beza kan?
  • Aku tambah ='' selepas crossorigin.
  • Aku tambah / kat hujung setiap kod.
  • Aku tukar simbol & kepada &amp; dalam kod ke-3.

  1. Pergi ke page Google Fonts tadi dan copy kod CSS untuk font tu.
  2. 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;

  1. 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 comment (s):

  1. tak pandai dengan coding ni. tu yang tak mahu sentuh bahagian coding tu, takut tersalah buat, langsung tak tau nak perbetulkan

    ReplyDelete
    Replies
    1. Slow-slow belajar. Dulu saya pun takut nak kacau coding. Lama-lama baru berani.

      Delete
  2. nakk check dkt coding ni pun takut takut salah tekan ke apa kan heeee

    ReplyDelete
    Replies
    1. Kena sentiasa back up sebelum masuk part coding. Belajar buat yang simple dulu. 😀

      Delete
  3. Dulu akak serabut tengok coding ni, tapi bila dah terbiasa jadi macam seronok pulak 😁.Mekaseh share tips.

    ReplyDelete
    Replies
    1. Kann. Susunan coding blog saya pun berterabur. Nanti ada masa kena kemaskan balik.

      Delete
  4. sekali 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

    ReplyDelete
  5. Maksudnya kannn, kena copy paste dua benda lah kan?

    font-display: swap;
    font-family: 'Port Lligat Slab', serif;

    dekat setiap bahagian yang perlu tukar font kann?

    (contoh font yang saya pilih hehehe)

    ReplyDelete
    Replies
    1. Okey maceh! Boleh tryyyyy sebab dah boring guna font sekarang ni hahaha.

      Haritu try font lain, tengok dekat laptop kita ni okey je. Tapi bila orang lain buka blog kita, font jadi lain. Macam setting lain pulakkkkk.

      Delete
  6. Bagus 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 :)

    ReplyDelete
    Replies
    1. Sama-sama. Dulu-dulu memang zaman tutorial. Sekarang tak ramai blogger kita yang buat tutorial dah.

      Delete
  7. Bola Katok kerja programmer, ye? Pandai edit html ye. Terima kasih, kerana berkongsi ilmu dengan kami. :)

    ReplyDelete
    Replies
    1. Nak kata programmer tu tak jugak. Just suka customize blog. Tu tau jugak pasal coding ni. 😅

      Delete
  8. Akak bab-bab ni memang fail. Tengok coding berbaris-baris tu, tak sampai 5 saat terus pening :)

    ReplyDelete
    Replies
    1. Awal-awal memang saya pening jugak. Berpinar mata. Tapi just buat coding simple macam tukar background dsb dulu. Nanti lama-lama terbiasa. 💪

      Delete
  9. customize font untuk setiap entry ni tak belajar lagi. Tengok ada gak blogger lain entry lain font. antilah baru belajar

    ReplyDelete
    Replies
    1. Ada masa nanti boleh belajar. No worries. 👍

      Delete

Sila komen, kerana komenmu begitu berharga.