Home / WordPress / Cara Cepat Mengganti Font Blog WordPress

Cara Cepat Mengganti Font Blog WordPress

Cara Cepat Mengganti Font Blog WordPress – Dulu pada awal ngeblog saya sempat mempunyai anggapan bahwa cara mengganti font hanya bisa dilakukan di komputer saja. Tapi anggapan saya itu ternyata salah besar. Karena kenyataanya di blog  juga baik WordPress ataupun Blogpsot bisa melakukan kegiatan tersebut.

Baca Juga : Trik Mudah Cara Memasang Script HTML Di WordPress

Cara Mengganti Font WordPress Gratisan

Mengganti font di WordPress, caranya memiliki perbedaan antara WordPress gratisan dan WordPress berbayar (TLD). Hal perbedaan yang paling menonjol antara WordPress.com dan WordPress.org adalah modifikasi style CSS.

Mengganti font di WordPress hanya bisa Anda lakukan di editor theme. Dan itu sangat mustahil bisa melakukannya jika CMS blog masih menggunakan WordPress gratisan. Tapi untuk pengguna CMS WordPress.com jangan patah semangat dulu ! Karena font WordPress bisa diganti juga tanpa harus upgrade WordPress. Atas dasar keterbatasan editor, maka teknik mengganti font ini hanya bisa dijalankan di halaman posting dan widget text saja.

Bagi pengguna WordPress.com jika malas mengganti tema hanya untuk merubah jenis font yang akan dipasang di halaman posting. Maka langkah satu-satunya bisa memanfa’atkan cara ini. Yaitu memanggil font yang umum digunakan di komputer dengan menambah sedikit kode HTML.

Font umum yang biasanya sudah terpasang otomatis di komputer OS Windows adalah sebagai berikut :

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

Selebihnya bisa Anda cari lagi di komputer pada C:\Windows\Fonts. Untuk kode HTML agar jenis-jenis font tertentu bisa diaktifkan pada halaman posting adalah sebagai berikut :

<span style="font-family: Kode Huruf">Disini Tulisannya</span>

Anda pasang kode HTML diatas pada mode Text halaman posting WordPress. Jika ingin sedikit dimodifikasi dengan menambahkan warna, ukuran, bayangan, ketebalan pada huruf. Contoh seperti di bawah ini :

Disini Tulisannya

Maka kodenya kira-kira seperti ini :

<span style="font-family: Agency FB; color: #FF0000; font-size: 100px; font-weight: bold; text-shadow: 4px 4px 8px #000;">Disini Tulisannya</span>

Silakan Anda sesuaikan dengan kebutuhan setiap kode HTML yang berwarna merah. Dan untuk kode warna yang lain Anda bisa melihat halaman Kode Warna blog ini.

Cara Mengganti Font WordPress Berbayar (TLD)

Cara Mengganti Font WordPress Berbayar atau blog Top Level Domain (TLD) ini sangat mudah. Anda tinggal mengoprek CSS Theme yang Anda gunakan. Dan sebenarnya langkah diataspun bisa Anda terapkan di blog WordPress Berbayar Anda. Namun kelemahannya jika Anda tidak menginstall font yang Anda gunakan di root theme, maka font tersebut tidak bisa berjalan dengan normal di komputer yang tidak terpasang font yang sama dengan font yang Anda tentukan.

Untuk menghindari hal tersebut dalam Cara Mengganti Font WordPress TLD, Anda bisa memanfa’atkan pihak ketiga. Banyak sekali pihak ketiga untuk mendukung Cara Mengganti Font WordPress, baik yang berbayar maupun yang gratis. Contoh WEB penyedia Font gratis yang bisa dipasang di CMS WordPress Anda adalah Google Fonts. Font yang disediakan di Goggle Fonts lumayan banyak juga jenisnya, Anda bisa memilih dan menentukan berbagai macam pilihan Font yang disediakan di Google Fonts.

Cara Mengganti Font WordPress Berbayar Dengan Google Fonts

Mengganti font WordPress.org sebetulnya cara diataspun bisa diterapkan juga. Namun selain itu kita bisa memanfa’atkan pihak ketiga. Dan disini saya akan memberi contoh menggunakan Google Fonts. Silakan Anda klik untuk menuju ke WEB Google Fonts.

Pada kolom pencarian di Google Fonts, Anda ketik jenis font yang ingin Anda terapkan di WordPress, contoh saya akan menggunakan jenis Font Bree Serif. Setelah Anda menemukan jenis font yang cocok, selanjutnya klik Quick-use.

cara-mengganti-font-wordpress-1

Geser kursor kebawah, nanti Anda akan menemukan tiga jenis script untuk ditambahkan di WordPress (Standard, @import, dan Javascript).

cara-mengganti-font-wordpress-2

Silakan pilih Standard lalu copy scriptnya dan paste di theme editor Anda pada header.php. Tepatnya di bawah kode <head>.

cara-mengganti-font-wordpress-3

Untuk menjalankan font yang sudah Anda tentukan di Google Fonts, Anda tinggal rubah jenis font default theme Anda pada style.css dengan format sebagai berikut :

font-family: 'Bree Serif', serif;

Contoh jika Anda ingin mengganti Font default theme pada heading H1, maka Anda bisa menggunakan script sebagai berikut pada style.css :

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

Mungkin hanya itu Cara Cepat Mengganti Font Blog WordPress baik untuk WordPress.com dan juga WordPress.org.

About InfoMenarik

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

26 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!

Leave a Reply

Your email address will not be published. Required fields are marked *