Terdapat beragam metode untuk menjadikan situs web WordPress Anda lebih menarik. Salah satu di antaranya adalah dengan mengganti jenis huruf di WordPress menggunakan huruf kustom.
Meskipun demikian, mungkin pilihan jenis huruf di WordPress terbatas, ukurannya tidak sesuai, atau bahkan harus disesuaikan dengan tema tertentu.
Tidak perlu khawatir, Anda tetap dapat menambahkan jenis huruf kustom untuk mengubah jenis huruf di WordPress beserta ukurannya, baik secara manual maupun dengan menggunakan plugin. Penasaran? Mari kita lanjutkan membaca artikel ini!
Tempat Download Jenis Huruf untuk WordPress
Anda dapat menemukan beragam jenis huruf web gratis di internet, dan rekomendasi kami adalah Font Squirrel. Di sana, Anda dapat dengan mudah menemukan jenis huruf gratis yang sudah memiliki lisensi untuk penggunaan komersial.
Selain itu, Google Fonts menawarkan lebih dari 900 keluarga huruf, dan Edge Web Fonts dari Adobe juga menyediakan beragam koleksi jenis huruf web. Atau, Anda dapat mengunjungi Envato Elements yang memiliki lebih dari 28.000 jenis huruf premium.
Jika Anda mencari pilihan jenis huruf yang lebih sesuai untuk penggunaan pribadi, Anda dapat mengecek Fonts.com, DaFont, dan 1001 Free Fonts.
Mengubah Jenis Huruf Menjadi Format yang Bisa Digunakan di Web
Perlu diketahui bahwa tidak semua peramban web mendukung setiap jenis huruf. Meskipun jenis huruf yang Anda pilih tidak didukung, Anda masih dapat mengubahnya menjadi format yang kompatibel.
Sebelum mengubah jenis huruf ke format lain, mari kita lihat beberapa format huruf yang ada:
- Font Open Type (OTF) – jenis huruf web yang paling umum digunakan dan merupakan merek dagang terdaftar dari Microsoft. Format ini berfungsi dengan baik di hampir semua peramban web populer.
- True Type Fonts (TTF) – dikembangkan oleh Microsoft dan Apple pada tahun 1980. Sering digunakan untuk Windows dan macOS.
- Web Open Font Format (WOFF) – format yang banyak digunakan untuk halaman web dan direkomendasikan oleh Konsorsium World Wide Web (W3C).
- WOFF 2.0 – dianggap sebagai pilihan yang lebih baik daripada WOFF 1.0 karena kemampuan kompresi yang lebih baik. Format ini tidak didukung oleh Safari dan Internet Explorer, tetapi berfungsi tanpa masalah dengan Google Chrome, Firefox, atau Opera.
- Font OpenType Tersemat (EOF) – jenis huruf OTF yang lebih ringkas, digunakan sebagai huruf sematan di halaman web. Semua peramban web populer mendukung EOF.
Jika Anda tidak yakin apakah jenis huruf yang dipilih kompatibel dengan peramban web Anda, gunakan Web Font Generator. Alat ini memudahkan Anda mengubah hampir semua jenis huruf menjadi format yang berfungsi di web:
- Klik tombol Upload Huruf, lalu pilih huruf yang ingin Anda ubah.
- Centang kotak di bagian Persetujuan untuk menyatakan bahwa huruf Anda memenuhi syarat hukum untuk disematkan di web.
- Tekan tombol Unduh Kit Anda lalu simpan file .zip ke komputer.
Di dalam file zip tersebut, Anda akan menemukan huruf dalam format WOFF dan WOFF 2.0 berserta file CSS dan halaman HTML demonstrasi.
Mengganti Jenis Huruf di WordPress
Berikut adalah cara mengganti jenis huruf di WordPress, baik secara manual maupun dengan menggunakan plugin.
Cara Mengganti Jenis Huruf di WordPress secara Manual
Jika Anda tidak ingin membebani WordPress dengan plugin, Anda dapat menambahkan huruf ke situs web secara manual. Anda perlu mengunggah huruf ke akun hosting WordPress atau jenis hosting apa pun yang Anda gunakan, lalu mengedit file CSS tema.
- Unduh huruf yang Anda inginkan ke komputer, lalu ekstrak arsip .zip jika diperlukan.
- Unggah file huruf ke direktori wp-content/themes/your-theme/fonts. Jika belum ada, buat folder fonts terpisah. Anda dapat menggunakan klien FTP seperti FileZilla atau File Manager Hostinger dalam hal ini. Sebagai contoh, kami mengunggah huruf AguafinaScript-Regular.ttf menggunakan File Manager di hPanel.
- Kemudian, buka area admin WordPress. Buka Appearance (Tampilan) → Theme file editor (Editor file tema). Anda akan menemukan file style.css. Gulir ke bawah dan tambahkan kode berikut:
@font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }Tips Berguna
Jangan lupa untuk mengubah nilai font-family dan URL sesuai dengan huruf yang Anda pilih.
Mengupdate file style.css menggunakan Theme Editor di WordPress
Klik Update File untuk menyimpan perubahan Anda.
Ingatlah bahwa kode font-face akan memuat huruf setiap kali pengunjung mengakses situs web Anda. Namun, huruf tersebut masih belum diterapkan pada elemen apa pun.
Untuk menetapkan huruf untuk elemen tertentu, Anda perlu mengedit file style.css yang sama. Sebagai contoh, kode berikut akan menerapkan huruf Aguafina Script ke judul situs web kami.
css
.site-title {
font-family: "Aguafina Script-Regular", Arial, sans-serif;
}Cara Mengganti Jenis Huruf di WordPress Menggunakan Plugin
Cara termudah untuk mengganti jenis huruf di WordPress mungkin adalah dengan menginstal plugin. Berikut beberapa plugin huruf WordPress yang populer:
1. WP Google Fonts
WP Google Fonts memungkinkan Anda menggunakan huruf kustom sesuai keinginan lalu menerapkannya pada elemen CSS tertentu.
– Pasang plugin WP Google Fonts dari direktori plugin WordPress, lalu buka Control Panel Google Font melalui dashboard WordPress. Di sini, Anda dapat memilih huruf dan mengubah berbagai pengaturannya, seperti gaya huruf, elemen yang ditetapkan, dan lain sebagainya.
2. Easy Google Fonts
Dengan Easy Google Fonts, Anda dapat menggunakan tema apa pun dan melihat pratinjau huruf secara real-time. Plugin ini juga mudah digunakan karena tidak memerlukan keterampilan pemrograman.
Setelah menginstal dan mengaktifkan plugin ini, Anda dapat mengedit dan mengelola pengaturan huruf melalui Settings (Pengaturan) → Google Fonts.
Jika Anda ingin mengubah tipografi tema, buka WordPress Customizer dengan mengklik Appearance (Tampilan) → Customize (Sesuaikan). Selanjutnya, Anda dapat mulai melakukan kustomisasi di bagian Tipografi untuk mengatur huruf di setiap bagian situs web.
3. Use Any Font
Use Any Font adalah plugin terbaik lainnya yang dapat membantu Anda menambahkan huruf ke WordPress. Setelah diinstal, buat kunci API gratis, lalu klik Verify.
Setelah verifikasi, Anda dapat mengunggah huruf dalam format TTF, OTF, dan WOFF. Selain itu, menggunakan Use Any Font juga memungkinkan Anda menetapkan huruf ke elemen kustom.
Cara Mengganti Ukuran Huruf di WordPress
Setelah mengganti jenis huruf di WordPress, Anda mungkin juga perlu menyesuaikan ukurannya agar lebih sesuai dengan gaya dan desain situs web. Di bagian ini, kami akan menjelaskan cara mengganti ukuran huruf WordPress.
1. Menggunakan TinyMCE Advanced
TinyMCE Advanced adalah plugin gratis yang memudahkan Anda memilih ukuran huruf yang diinginkan. Plugin ini menyediakan toolbar editor klasik pada editor Gutenberg yang baru.
Sebelum memulai, Anda harus menginstal dan mengaktifkan plugin ini terlebih dahulu, kemudian membuka halaman Settings. Anda akan menemukan dua tab: Block Editor (Gutenberg) dan Classic Editor (TinyMCE Advanced).
Jika ingin menggunakan editor klasik saja, aktifkan Replace the Block Editor with the Classic Editor pada Advanced Settings. Tetapi, jika ingin menggunakan keduanya secara berdampingan, jangan centang kotaknya.
Berikut cara mengganti huruf di WordPress menggunakan plugin ini:
1. Pilih create a new post atau edit artikel yang sudah ada. Berikut ini adalah tampilan editor paragraf klasik.
2. Soroti baris teks yang ingin diubah, lalu pilih ukuran huruf.
2. Menggunakan CSS
Cara yang baru saja kami jelaskan sesuai untuk pemula karena mudah diikuti, sementara cara mengubah huruf di WordPress menggunakan CSS mungkin akan sedikit sulit.
Namun, ketika menggunakan plugin atau editor WordPress default, Anda perlu melakukan perubahan pada setiap postingan dan halaman. Dengan CSS, Anda dapat mengatur huruf untuk seluruh situs web.
Cara mengganti huruf di WordPress menggunakan CSS mengharuskan Anda menulis beberapa baris kode. Anda dapat melakukannya melalui editor atau Customizer. Namun, sebaiknya gunakan customizer karena akan lebih mudah.
1. Masuk ke dashboard WordPress, lalu pilih Appearance (Tampilan) > Customise (Sesuaikan).
2. Pilih Additional CSS (CSS tambahan).
3. Anda dapat menambahkan baris kode pada kotak di sebelah kiri.
– Untuk mengganti seluruh huruf: `body { font-size: 1.25rem; }`
– Untuk mengganti huruf paragraf: `p { font-size: 25px; }`
– Untuk mengganti huruf heading tertentu: `h2 { font-size: 2.5em; }`
– Untuk memodifikasi ukuran huruf sidebar: `.sidebar li { font-size: 12px; }`
– Untuk mengustomisasi huruf footer: `.footer { font-size: 150%; }`
– Untuk mengganti ukuran huruf pada layar tertentu:
css
html { font-size: 18px; } @media (min-width: 900px) { html { font-size: 20px; } }
```Kustomisasi gaya CSS menggunakan empat satuan untuk mengatur ukuran huruf pada teks:
- Em (em): Digunakan pada dokumen media web. 1 em sama dengan 12 poin.
- Piksel (px): Digunakan pada media layar. 1 px sama dengan 1 dot pada layar komputer.
- Poin (pt): Satuan untuk media cetak tradisional. 1 poin sama dengan 1/72 inci.
- Persen (%): Defaultnya adalah 100%, yang akan berubah setelah diperbesar atau diperkecil.
3. Menggunakan Gutenberg
Seperti yang sudah kami sebutkan di atas, Gutenberg adalah tambahan baru di WordPress. Gutenberg terintegrasi dalam CMS ini untuk memudahkan Anda mengedit postingan yang memuat banyak media.
Perubahan yang cukup terlihat adalah penggunaan blok. Blok memungkinkan Anda menggunakan drag-and-drop untuk menyisipkan file media apa pun ke postingan Anda, seperti platform page builder lainnya.
Untuk merubah ukuran huruf di WordPress dengan Gutenberg editor, ikuti langkah-langkah mudah berikut:
- Pilih postingan yang ingin diedit, atau pilih Add New.
- Klik menu titik tiga untuk mengakses pengaturan Typography yang tidak terlihat secara default.
- Arahkan kursor ke blok yang ingin Anda modifikasi lalu pilih salah satu ukuran: small (kecil), medium (sedang), large (besar), dan extra large (sangat besar).
- Jika ingin mengganti ke ukuran tertentu, masukkan ukuran kustom di kolom Custom Size. Anda bisa memilih px, em, atau rem.
- Atau, geser slider untuk memperbesar atau memperkecil ukuran huruf.
Kesimpulan
Melalui artikel ini, Anda sudah mempelajari cara mengganti jenis huruf pada WordPress. Tanpa melupakan pentingnya keseimbangan antara jenis huruf dan ukuran, pastikan pilihan Anda sesuai dengan tema dan karakter situs web. Konsistensi dalam penggunaan huruf dapat meningkatkan citra merek dan kenyamanan pembaca.
Dengan begitu, Anda kini memiliki pemahaman yang lebih mendalam tentang cara mengelola jenis huruf dan ukuran di WordPress. Untuk pertanyaan lebih lanjut atau penjelasan tambahan, jangan ragu untuk berbagi melalui kolom komentar di bawah artikel ini. Atau, kunjungi panduan WordPress kami yang kaya dengan informasi bermanfaat seputar pengelolaan konten daring.
