Selain itu, Google Fonts<\/a> memiliki lebih dari 900 font family, dan ada juga Edge Web Fonts<\/a> daru Adobe yang menawarkan banyak koleksi web font. Atau, Anda bisa mengunjungi Envato Elements<\/a>, yang memiliki lebih dari 28.000 font premium.<\/p> Apabila mencari pilihan font yang lebih cocok untuk penggunaan pribadi, Anda bisa mengecek Fonts.com<\/a>, DaFont<\/a>, dan 1001 Free Fonts<\/a>.<\/p> Perlu diketahui bahwa tidak semua web browser mendukung setiap jenis font. Namun, meskipun font yang dipilih tidak didukung, Anda masih bisa mengubahnya menjadi format yang kompatibel.<\/p> Sebelum mengubah font ke format lain, mari lihat berbagai format font yang ada:<\/p> Apabila tidak yakin apakah font yang dipilih akan kompatibel dengan browser Anda, gunakan Web Font Generator<\/a>. Tool ini memudahkan Anda mengubah hampir semua jenis font menjadi format yang berfungsi di web:<\/p> Berikut adalah cara ganti font WordPress, baik secara manual maupun menggunakan plugin.<\/p> Apabila tidak ingin memberatkan WordPress dengan plugin, Anda bisa menambahkan font ke website secara manual. Anda perlu mengupload font ke akun WordPress hosting<\/a> atau jenis hosting apa pun yang digunakan, lalu mengedit file CSS tema.<\/p> \n\n\n Jangan lupa untuk mengubah nilai font-family<\/strong> dan URL<\/strong> sesuai font yang Anda pilih.<\/p>\n <\/div>\n\n\n\n Ingat, kode font-face<\/strong> akan memuat font setiap kali pengunjung mengakses website Anda. Namun, font tersebut masih belum diterapkan pada elemen apa pun.<\/p> Untuk menetapkan font bagi elemen tertentu, Anda perlu mengedit file style.css<\/strong> yang sama. Sebagai contoh, kode berikut akan menerapkan font Aguafina Script<\/strong> ke judul website kami.<\/p> Berikut hasil akhirnya:<\/p> Cara termudah untuk mengganti font di WordPress mungkin adalah dengan menginstal plugin<\/a>. Berikut beberapa pilihan plugin font WordPress terpopuler:<\/p> WP Google Fonts memungkinkan Anda menggunakan font kustom sesuai keinginan lalu menerapkannya pada elemen CSS tertentu.<\/p> Install plugin WP Google Fonts dari direktori plugin<\/a> WordPress, lalu buka Control Panel Google Font<\/strong> melalui dashboard WordPress. Di sini, Anda bisa memilih font dan mengubah berbagai pengaturannya, seperti font style, elemen yang ditetapkan, dan lain sebagainya.<\/p> Dengan Easy Google Fonts, Anda bisa menggunakan tema apa pun dan melihat preview font secara real-time. Plugin ini juga mudah digunakan karena tidak memerlukan skill pemrograman.<\/p> Setelah menginstal dan mengaktifkan plugin ini, Anda bisa mengedit dan mengelola pengaturan font melalui Settings <\/strong>(Pengaturan) → Google Fonts<\/strong>.<\/p> Apabila ingin mengubah tipografi tema, buka WordPress Customizer<\/strong> dengan mengklik Appearance <\/strong>(Tampilan) → Customize <\/strong>(Sesuaikan). Selanjutnya, Anda bisa mulai melakukan kustomisasi di bagian Tipografi<\/strong> untuk mengatur font di setiap bagian website.<\/p> Use Any Font adalah plugin terbaik lainnya yang bisa membantu Anda menambahkan font ke WordPress. Setelah diinstal, buat API key gratis, lalu klik Verify<\/strong>.<\/p> Setelah verifikasi, Anda bisa mengupload font dalam format TTF<\/strong>, OTF<\/strong>, dan WOFF<\/strong>. Di samping itu, menggunakan Use Any Font juga memungkinkan Anda menetapkan font ke elemen kustom.<\/p> Setelah mengubah font WordPress, Anda mungkin juga perlu menyesuaikan ukurannya agar lebih sesuai dengan gaya dan desain website. Di bagian ini, kami akan menjelaskan cara mengganti ukuran font WordPress.<\/p> TinyMCE Advanced<\/a> adalah plugin gratis yang memudahkan Anda memilih ukuran font yang diinginkan. Plugin ini menyediakan toolbar editor klasik pada editor Gutenberg yang baru.<\/p> Sebelum memulai, Anda harus menginstal dan mengaktifkan plugin ini terlebih dahulu, kemudian membuka halaman Settings. <\/strong>Anda akan menemukan dua tab: Block Editor (Gutenberg) <\/strong>dan Classic Editor (TinyMCE Advanced)<\/strong>.<\/p> Jika ingin menggunakan editor klasik saja, aktifkan Replace the Block Editor with the Classic Editor <\/strong>pada Advanced Settings<\/strong>. Tapi, jika ingin menggunakan keduanya secara berdampingan, jangan centang kotaknya.<\/p> Berikut cara mengganti font di WordPress menggunakan plugin ini:<\/p> Cara yang baru saja kami jelaskan sesuai untuk pemula karena mudah diikuti, sementara cara mengubah font di WordPress menggunakan CSS mungkin akan sedikit sulit.<\/p> Namun, ketika menggunakan plugin atau editor WordPress default, Anda perlu melakukan perubahan pada setiap postingan dan halaman. Dengan CSS, Anda bisa mengatur font untuk seluruh website.<\/p> Cara mengganti font di WordPress menggunakan CSS mengharuskan Anda menulis beberapa baris kode. Anda bisa melakukannya melalui editor atau Customiser<\/strong>. Namun, sebaiknya gunakan customiser karena akan lebih mudah.<\/p> Anda bisa menambah baris kode pada kotak di sebelah kiri.<\/p> Kustomisasi gaya CSS menggunakan empat satuan untuk mengatur ukuran font pada teks:<\/p> 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.<\/p> 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<\/a> lainnya.<\/p> Seperti ini tampilan bloknya:<\/p> Untuk merubah ukuran font di WordPress dengan Gutenberg editor, ikuti langkah-langkah mudah berikut:<\/p> Atau, geser slider untuk memperbesar atau memperkecil ukuran font.<\/p> Melalui artikel ini, Anda sudah mempelajari cara mengganti font WordPress baik secara manual maupun menggunakan plugin. Anda juga sudah tahu cara mendownload dan mengubah font menjadi format yang bisa digunakan di web.<\/p> Selain mengubah font WordPress, di artikel ini Anda juga mempelajari cara mengganti ukuran font WordPress dengan beberapa metode.<\/p> Mana pun cara yang Anda terapkan, pastikan font dan ukuran yang dipilih cocok dengan tema dan gaya situs web Anda.<\/p>Cara Mengubah Font Menjadi Format yang Bisa Digunakan untuk Web<\/h2>
\n
\n
![\"convert](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/convert-font-ke-format-web-friendly-untuk-menambahkan-font-custom.png\/public\")
<\/figure>\n
Cara Mengganti Font di WordPress<\/h2>
Cara Mengganti Font di WordPress secara Manual<\/h3>
\n
![\"mengupload](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/mengupload-file-font-ke-file-manager-hostinger.png\/public\")
<\/figure><\/div>\n
@font-face { font-family: Aguafina Script-Regular; src: url(http:\/\/test-site.com\/wp-content\/themes\/twentynineteen\/fonts\/AguafinaScript-Regular.ttf); font-weight: normal; }<\/code><\/p>Tips Berguna<\/h4>\n
![\"mengupdate](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/03\/update-changes-in-style-css-editor.webp\")
<\/figure>\n\n\n\n<\/p>\n
.site-title {
font-family: \"Aguafina Script-Regular\", Arial, sans-serif;
}<\/pre>![\"contoh](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/03\/adding-title-fonts-result.webp\")
<\/figure>Cara Mengganti Font di WordPress Menggunakan Plugin<\/h3>
WP Google Fonts<\/strong><\/a><\/h4>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/control-panel-wp-google-font.png\/public\")
<\/figure><\/div>Easy Google Fonts<\/strong><\/a><\/h4>
Use Any Font<\/strong><\/a><\/h4>
![\"menggunakan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/screenshot-plugin-use-any-font.png\/public\")
<\/figure><\/div>Cara Mengganti Ukuran Font di WordPress<\/h2>
Menggunakan TinyMCE Advanced<\/h3>
\n
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/classic-editor-wordpress.png\/public\")
<\/figure><\/div>\n
![\"ukuran](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/ukuran-font-di-classic-editor-wordpress.png\/public\")
<\/figure><\/div>\n
![\"ukuran](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/ukuran-font-berhasil-diganti-di-classic-editor-wordpress.png\/public\")
<\/figure><\/div>Menggunakan CSS<\/h3>
\n
![\"menu](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/menu-sesuaikan-tampilan-wordpress-di-dashboard.png\/public\")
<\/figure><\/div>\n
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-customiser-css.png\/public\")
<\/figure><\/div>\n
body { font-size: 1.25rem; }<\/code><\/li>\n<\/ol>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-customiser-css-font-body.png\/public\")
<\/figure><\/div>\n
p { font-size: 25px; }<\/code><\/li>\n<\/ol>![\"wordpress](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-customiser-css-font-paragraf.png\/public\")
<\/figure><\/div>\n
h2 { font-size: 2.5em; }<\/code><\/li>\n<\/ol>![\"wordpress](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-customiser-css-font-heading.png\/public\")
<\/figure><\/div>\n
.sidebar li { font-size: 12px; }<\/code><\/li>\n\n\n\n.footer { font-size: 150%; }<\/code><\/li>\n\n\n\nhtml { font-size: 18px; } @media (min-width: 900px) { html { font-size: 20px; } }<\/code><\/p>\n
Menggunakan Gutenberg<\/h3>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-gutenberg-editor.png\/public\")
<\/figure><\/div>\n
![\"wordpress](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-gutenberg-editor-typography.png\/public\")
<\/figure><\/div>\n
![\"wordpress](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-gutenberg-editor-ukuran-preset-typography.png\/public\")
<\/figure><\/div>\n
![\"wordpress](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-gutenberg-editor-ukuran-kustom-typography.png\/public\")
<\/figure><\/div>![\"wordpress](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/12\/wordpress-gutenberg-editor-slider-ukuran-typography.png\/public\")
<\/figure><\/div>Kesimpulan<\/h2>