Info Menarik Berbagi Info & Tips Trik Menarik 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>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.
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.
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.
Bagaimana mudah bukan? Silakan selamat mencoba dan semoga sukses. Jika menemukan kendala atau kesulitan, silakan bisa Kamu sampaikan di kolom komentar. Salam sukses selalu …
dimana ?
Dimana saja.
Thanks ka infonya ya :) Izin s hare..
Ok. Kalau share diblog jangan lupa untuk mencantumkan link sumbernya ya!
Thanks guys infonya :)
Sama-sama guys.
kenapa di wp saya scriptnya gak jalan ya?
Script yang mana mas yang ga jalan?
Sudah berhasil mas.. Terima kasih ^^
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.
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.csspada selektorbodyatausingle-post. Untuk ukuran huruf rubahlah nilai padafont-size.Wih makasih ya mas. Informasi nya berguna sekali :)
Sangat bermanfaat bagi saya yang masih belajar.
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.
Mas kalau ngubah default font word press piye carane? Biar praktis gak tiap kali nulis mesti rubah-rubah.
Terimakasih
Kalau mas menggunakan WordPress Self Hosted gampang, mas tinggal mengubah pengaturan font dari
stye.csssaja. Mas bisa menggunakan Google Font atau Font Awesome.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 !
infonya bagus gan. kebetulan ane mau rubah font di wp ane
kunjung balik ya?
semuatutorial[dot]web[dot]id
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!
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.
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
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.
thanks info nya gan, alau ada ilmu yang baik2 tolong di share yaaa para master agar bisa belajar lebih banyak lagi………..
Terima kasih mas, segera saya praktek kan
Sarae pak font na
Cuma font bawaan Windows selebihnya pakai Google Font!