Rabu, 30 November 2022

Cara Cepat dan Mudah Mengganti Font Bawaan Tema Blog WordPress

Info Menarik – Jika Kamu ingin tahu bagaimana cara mengganti font bawaan tema WordPress, maka Kamu telah membaca artikel yang tepat. Pada kesempatan ini saya akan mengulas tuntas cara mengubah font pada blog atau website WordPress. Hal ini tentu saja untuk membuat blog atau website agar lebih menonjol dari yang lainnya.

Kemudian dari banyaknya komponen blog atau website yang bisa kita ubah salah satunya adalah memodifikasi font. Dan menentukan font yang unik dapat menjadi identitas blog atau website Kamu. Selanjutnya terkadang meskipun kita sudah menggunakan tema berbayar, tapi font bawaan dari tema tersebut tidak cocok dengan gaya Kamu. Jika demikian maka Kamu meski mengganti font tersebut secara manual.

Cara Mengganti Font Bawaan Tema Blog WordPress

Seperti yang sudah kita ketahui bahwa WordPress itu terbagi menjadi dua bagian, yaitu: WordPress gratisan dan WordPress berbayar.

WordPress gratisan adalah blog WordPress yang masih menggunakan domain dari situs WordPress.com sendiri. Biasanya domain akan diikuti dengan WordPress.com dan memang domain yang kita miliki merupakan subdomain dari WordPress tersebut.

Sedangkan untuk WordPress berbayar adalah blog atau website yang kita kelola menggunakan domain dan hosting berbayar. Domain dan hosting itu bisa kita dapatkan atau beli di WordPress atau membeli di layanan domain dan hosting lainnya. CMS WordPress-nya gratis, namun domain dan hosting menggunakan yang berbayar.

Dari kedua versi WordPress tersebut di atas yang menjadi perbedaan paling menonjol adalah di WordPress gratis kita tidak bisa mengedit atau memodifikasi tema. Sehingga tampilan blog atau website menjadi apa adanya sesuai dengan tema yang kita pilih.

Namun meskipun demikian kita masih bisa sedikit mengakalinya dengan mengubah font secara manual yang letaknya di postingan artikel.

Cara Mengubah Font di Blog WP Gratisan

Karena di WordPress.com tidak bisa mengedit tampilan tema khususnya lagi mengubah font maka kita harus mengganti font secara manual dari halaman posting artikel. Memang hal ini lumayan ribet, karena pengeditan ini harus kita lakukan manual di setiap kali kita posting artikel. Namun meskipun begitu jika Kamu penasaran silakan untuk mencobanya sendiri.

1. Mencari Font Default Windows

Selanjutnya hal mengubah font di WordPress.com kita akan menggunakan font bawaan Windows. Dalam hal ini kode yang kita pasang di postingan artikel akan memanggil font yang tersimpan di komputer pengguna atau mereka yang membuka blog kita.

Lalu kenapa harus font bawaan Windows?

Karena jika kita menggunakan font yang bukan bawaan Windows otomatis kode tersebut menjadi tidak berfungsi.

Oleh karena itu sebelum praktik silakan Kamu cari tahu dulu font-font apa saja yang biasanya sudah terpasang otomatis di Windows.

Berikut saya sudah menyiapkan sebagian font bawaan Windows:

Jenis Huruf Kode Huruf
Agency FB Agency FB
Algerian Algerian
Arial Arial
Arial Narrow Arial Narrow
Baskerville Old Face Baskerville Old Face
Bauhaus 93 Bauhaus 93
Benguiat Bk BT Benguiat Bk BT
Bernard MT Condensed Bernard MT Condensed
Blackadder ITC Blackadder ITC
Book Antiqua Book Antiqua
Bradly Hand ITC Bradly Hand ITC
Bremen Bd BT Bremen Bd BT
Broadway Broadway
Calibri Calibri
Cambria Cambria
Castellar Castellar
Chiller Chiller
Comic Sans MS Comic Sans MS
Copperplate Gothic Copperplate Gothic
Curlz MT Curlz MT
Edwardian Script ITC Edwardian Script ITC
Franch Script MT Franch Script MT
Harlow Solid Italic Harlow Solid Italic
Lucida Handwriting Lucida Handwriting
Magneto Magneto
Jockerman Jockerman
Old English Text MT Old English Text MT
Onyx Onyx
Tekton Pro Tekton Pro
Times New Roman Times New Roman

2. Pasang Kode di Mode Text Editor Postingan

Untuk menggunakan font bawaan Windows agar berfungsi di blog kita silakan Kamu gunakan kode berikut ini:

<span style="font-family:Kode Huruf">Tulisan Artikel</span>

Kemudian Kamu pasang kode HTML di atas pada mode Text halaman posting WordPress. Dan ingat pada Kode Huruf silakan sesuaikan dengan jenis font yang Kamu inginkan sesuai dengan daftar tabel font di atas.

Selanjutnya jika ingin sedikit Kamu modifikasi tampilannya seperti menambahkan warna, ukuran, bayangan, ketebalan pada huruf, silakan gunakan kode berikut:

<span style="font-family: Agency FB; color: #FF0000; font-size: 80px; font-weight: bold;
text-shadow: 3px 3px 6px #000;">Tulisan Artikel</span>
Untuk jenis font, warna font, ukuran font, dan ketebalan font silakan Kamu sesuaikan dengan kebutuhan. Contoh kode di atas saya menggunakan jenis font Agency FB dengan warna merah dan ukuran huruf 80px serta saya beri efek tebal (bold) dan bayangan (shadow).

Hasil dari kode dia atas adalah sebagai berikut:

Tulisan Artikel

Cara Mengganti Font di Blog WP Berbayar

Seperti yang sudah saya terangkan di atas bahwa kelebihan menggunakan WordPress berbayar atau blog Top Level Domain (TLD) adalah kita bisa dengan bebas modifikasi tampilan tema. Namun meskipun begitu, menggunakan cara di atas juga bisa kita terapkan di WordPress berbayar.

Di blog WordPress berbayar selain dapat menggunakan font bawaan Windows atau file font yang tersimpan di komputer pengguna, kita juga bisa memanggil font yang tersimpan di Google. Kemudian font yang tersimpan di server Google ini lebih kita kenal dengan sebutan Google Fonts.

Selanjutnya font yang disediakan oleh Google ini dapat kita manfaatkan secara gratis. Selain itu saat ini banyak juga koleksi jenis font yang dimiliki oleh Google.

1. Cari Font yang Sesuai di Google Fonts

Pertama silakan Kamu cari font yang sesuai dengan selera di halaman Google Fonts. Contoh saya akan memilih font Roboto dari Christian Robertson.

Cara Mengganti Font WordPress 1

Kemudian nanti di halaman font yang Kamu pilih akan tampil beberapa style seperti regular, medium, bold, dan sebagainya. Selanjutnya sebagai contoh saya akan memilih yang standar saja, silakan klik pada ikon plus (+) untuk menambahkan.

Cara Mengganti Font WordPress 2

Lalu setiap style font yang kita pilih akan masuk ke list selected families. Silakan Kamu klik Selected family untuk melanjutkan proses penggunaan Google Fonts di blog WordPress.

Terdapat dua kode yang harus kita pasang di blog WordPress yaitu: kode Embed font dan CSS. Untuk kode embed harus kita pasang di header.php tepatnya lagi di bawah kode <head>.

Selanjutnya untuk kode CSS harus kita pasang di style.cssblog WordPress.

Contoh saya akan menggunakan Google Fonts Roboto dan font tersebut untuk mengganti font Heading-1 (H1) bawaan tema. Maka untuk kodenya yang kita tempatkan di style.css adalah sebagai berikut:

h1 {
 font-family: 'Roboto', sans-serif;
 font-weight: 400;
 font-size: 16px;
 color: #526f94;
 }

Otomatis setelah menerapkan kode di atas maka seluruh font pada Heading-1 blog atau website akan berubah menjadi menggunakan font Roboto dari Google Fonts.

Baca Juga: Inilah Cara Menggunakan Font Face Di WordPress

Bagaimana mudah bukan? Silakan selamat mencoba dan semoga sukses. Jika menemukan kendala atau kesulitan, silakan bisa Kamu sampaikan di kolom komentar. Salam sukses selalu …

About Info Menarik

Berbagi Info & Tips Trik Menarik tentang Android, EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

33 comments

  1. Thanks ka infonya ya :) Izin s hare..

  2. kenapa di wp saya scriptnya gak jalan ya?

  3. yudi web developer

    bro kok gak jalan sama skali ya code font nya, kalau d html sih mau.
    apa karena WP saya gratisan ya? atau ada pengaruh dari theme yang saya pilih?
    tx saya tunggu balsan nya

    • WordPress gratisan tidak bisa mas. WordPress.com hanya bisa menggunakan font yang umum saja atau yang sudah biasa terpasang di Komputer Windows seperti Arial, Tahoma, dan lain-lain. Coba mas baca lagi deh artikel diatas.

  4. mas admin, ada gak sih cara menguba size text di postingan. wordpress?
    dan bila beli domain di wordpress seharga 18$ itu permanent ataou ada jangka waktunya?

    • Jika mas menggunakan WordPress self hosted (berbayar) silahkan mas rubah ukuran huruf postingan di dalam file style.css pada selektor body atau single-post. Untuk ukuran huruf rubahlah nilai pada font-size.

  5. Wih makasih ya mas. Informasi nya berguna sekali :)
    Sangat bermanfaat bagi saya yang masih belajar.

  6. makasih infonya gan. lagi nyari nih buat rubah font di blogku… kalau buat merubah ukuran huruf pake plug in google font bisa ga gan?

    • Bisa gan! Tinggal atur saja di style.css dengan menggunakan font-size. Lebih bagus lagi menggunakan font face. Caranya bisa dilihat pada artikel ini.

  7. Mas kalau ngubah default font word press piye carane? Biar praktis gak tiap kali nulis mesti rubah-rubah.
    Terimakasih

  8. Halo mas, saya sudah coba mengedit style.css di blog saya, baik itu ukuran font maupun settingan yang mengubah tag H1-H6 jadi huruf besar semua (text-transform: uppercase;), tapi kok tidak berubah ya? Saya juga menggunakan Theme Point, di web info-menarik kok bisa ya? Apa itu ada trik khususnya mas? Mohon bantuannya, terimakasih sebelumnya

    • Saya sudah dan cek bisa gan. Yang agan ubah script ini kan?

      h1, h2, h3, h4, h5, h6 {
          margin: 0;
          margin-bottom: 12px;
          color: #2A2A2A;
          font-weight: bold;
          text-transform: uppercase;
      }
      • Iya mas, yang itu. Apa cuma dihapus aja ya yg uppercase-nya? Saya sudah tes, pas disimpan style.css-nya saat dibuka tak ada yang berubah duh..

        • Ceritanya mas ini mau mengubah font jadi bagaimana? Kalau efeknya tidak mau huruf kapital semua maka ya dihilangkan saja script text-transform: uppercase;. Mungkin saja mas menggunakan CDN CloudFlare! Jika iya maka akan ada cache dulu setiap melakukan perubahan editor template, maka seolah-olah tidak ada perubahan. Untuk menghindarinya silakan hapus dulu cache yang ada di CDN CloudFlare setiap sudah melakukan perubahan di template. Atau mungkin juga mas menggunakan Plugin WP Super Cache atau W3 Total Cache WordPress! Jika benar, setelah melakukan perubahan juga harus dihapus cache dari plugin tersebut.

          Tadi sudah saya tes mengubah huruf yang ada di blog mas dari metode Inpeksi Element browser dan tidak ada masalah sedikitpun mas!

          • Sudah beres mas, tadinya cuma mau gedein font aja sama yg uppercase itu. Saya lupa kalau ada cloudflare juga hehe. Ternyata memang masalah cache di browser, terima kasih banyak mas sekali lagi. Sukses terus untuk info-menarik.net !

  9. infonya bagus gan. kebetulan ane mau rubah font di wp ane
    kunjung balik ya?
    semuatutorial[dot]web[dot]id

  10. kalo tampilan di home page gimana ya, kok ga berubah ya gan? apakah ada cara lain? Tolong infonya ya gan. Terimakasih

    • Jika prosedurnya sudah benar, mungkin agan mengaktifkan plugin cache atau CDN. Coba clear dulu cache dan historynya termasuk yang di web browser juag!

  11. Maaf mau nanya mas, setelah saya ubah ukuran font-nya via Css, berhasil.
    Tapi bingkai templatenya jadi melebar, sehingga gambar header ama body jadi gak presisi (gak enak diandang).

    So, gimana caranya agar perubahan ukuran font tersebut tidak mengakibatkan layout templatenya juga berubah?

    Mohon pencerahan, terimakasih sebelumnya.

  12. kebetulan baru hijrah ke WP Selfhost thanks tutornya gan, oiya kalo mau bikin footer menu yg dibawah blog gimana ya contohnya macem blog ini ada profil penulis label post dll

  13. Tulisan yg sangat bermanfaat. Kalo mau edit font MENU gimana langkahnya ya.?
    Kalo mas buka website saya bahanguru itu font dari Home, Berita, RPP K13 dll mo saya ubah, tapi dah mutar2 belum dapat juga. mohon bantuannya. maklum saya newbi.

  14. thanks info nya gan, alau ada ilmu yang baik2 tolong di share yaaa para master agar bisa belajar lebih banyak lagi………..

  15. Terima kasih mas, segera saya praktek kan

  16. Sarae pak font na

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.