Kembali ke Dukungan Desain Situs Anda Mengubah Font Situs

Mengubah Font Situs

Buat tampilan situs makin unik dengan font menarik. Setiap tema dilengkapi dengan beberapa pilihan font khusus, termasuk font dari Google Fonts.

Untuk mengganti font, caranya berbeda-beda tergantung tema yang Anda gunakan:

Mengganti Font lewat Editor Situs

Fitur ini tersedia di situs dengan paket WordPress.com Explorer, Creator, dan Entrepreneur, serta paket Pro lawas. Untuk situs yang menggunakan paket gratis dan Starter, upgrade paket Anda untuk mengakses fitur ini.

Jika tema situs mendukung Editor Situs, ganti font situs lewat pengaturan Tipografi dengan cara mengeklik tombol Gaya di Editor Situs.

Panah yang menunjukkan tombol Gaya di Editor Situs

Mengganti Font lewat Gaya Global

Jika situs Anda menggunakan salah satu tema ini, gunakan Gaya Global untuk mengubah font-nya

  1. Di dasbor Anda, klik Halaman.
  2. Klik tombol Tambah Baru atau judul halaman yang sudah ada agar halaman tersebut terbuka di Editor WordPress.
    • Pilih tata letak yang diinginkan. Jika membuat halaman baru, pilih tata letak Kosong yang merupakan default.
  3. Di editor, klik tombol Gaya Global. Tombol berbentuk huruf “Aa” ini ada di antara ikon Pengaturan dan tombol Jetpack berwarna hijau.
  4. Klik menu tarik-turun di bawah tulisan Judul atau Font Dasar untuk melihat pilihan font yang tersedia.
Kotak menunjukkan tombol Gaya Global yang berada di sudut kanan atas editor blok di antara tombol Pengaturan Halaman dan tombol pengaturan Jetpack.

Font diatur secara berpasangan: satu font untuk judul dan satunya lagi merupakan font dasar.

Klik Terbitkan untuk menyimpan pasangan font yang baru saja Anda pilih di menu Gaya Global atau klik Atur Ulang untuk membatalkan perubahan.

Menyimpan perubahan yang dibuat di menu Gaya Global tidak berarti akan menerbitkan halaman tertentu yang sedang Anda buka.

Menyesuaikan Ukuran Font

Editor Blok memberikan pilihan untuk mengubah ukuran font di dalam tiap blok.

Untuk mengubah ukuran font judul, pilih judul yang berbeda (H1, H2, dst.) yang terdapat di blok judul.

Bilah peralatan di atas blok Judul yang dilengkapi opsi untuk mengubah ukuran judul.
Pilihan H5 hingga H6 berada di Pengaturan Blok di bagian samping Editor Blok.

Paragraf, tombol, dan blok teks lainnya memiliki pilihan Tipografi di Pengaturan Blok untuk mengubah ukuran teks ke ukuran Preset atau ke ukuran yang bisa Anda tentukan sendiri.

Jika bilah sisi tidak muncul, klik ikon Pengaturan di sudut kanan atas untuk membuka pengaturan. Ikon tersebut tampak seperti kotak yang di dalamnya terdapat dua bagian berbeda ukuran.

Ikon pengaturan di Editor yang berlatar belakang hitam dengan tooltip bertuliskan "Pengaturan" di bawahnya.
Klik ikon Pengaturan untuk membuka pengaturan blok.

Mengganti Font lewat Customizer

Banyak tema memberikan pilihan untuk mengubah font dengan membuka Tampilan → Sesuaikan. Jika tidak ada pilihan font yang muncul di Customizer, pastikan tema mendukung pengubahan font lewat Gaya Global.

  1. Dari dasbor, buka TampilanSesuaikan.
  2. Klik pilihan Font di Customizer.
  3. Klik menu tarik-turun di bawah tulisan Judul atau Font Dasar untuk melihat pilihan font yang tersedia.
Menu Menyesuaikan Font di Customizer dengan menu tarik-turun Judul dan Font Dasar.

Font diatur secara berpasangan: satu font untuk judul dan satunya lagi merupakan font dasar.

Tiap kali mengubah font, pratinjau langsung akan disegarkan kembali sehingga Anda bisa melihat tampilan font tersebut di blog Anda.

Menyesuaikan Ukuran dan Gaya Font

Gaya font – Untuk menyesuaikan gaya font judul Anda, klik pilihan di bawah dan di sebelah kiri font tersebut. Gaya yang tersedia bisa beragam bergantung pada font yang telah Anda pilih.

Ukuran font – Untuk menyesuaikan ukuran font judul atau font dasar Anda, klik pilihan ukuran di bawah dan di sebelah kanan untuk tiap font yang dipilih, lalu pilih ukuran dari menu tarik-turun.

Panel Menyesuaikan Font yang menampilkan Judul diatur menjadi font Tangerine, gaya font diatur menjadi tebal, dan ukurannya diatur menjadi besar.

💡

Untuk mengubah ukuran font default yang diterapkan secara global, gunakan CSS kustom.

Menyimpan Font

Setelah puas dengan pilihan font Anda, Terbitkan situs. Anda juga dapat mengeklik tombol Simpan Draf untuk melanjutkan menyesuaikan situs sebelum menerbitkannya.

Mengganti Font

Setelah memilih font kustom, Anda tetap dapat menggantinya kapan saja.

Untuk mengubah font kustom saat ini, buka Tampilan SesuaikanFont lalu pilih Font Judul atau Font Dasar lainnya. Anda juga bisa menggantinya menjadi font default Tema dengan mengeklik tanda X di sebelah kanan nama font kustom.

Setelah puas dengan perubahan font, klik Terbitkan atau klik Simpan Draf untuk melanjutkan menyesuaikan situs.

Panel Menyesuaikan Font dengan tanda panah yang menunjuk tanda X di sebelah kanan font judul kustom untuk mengembalikan font ke font default tema.
Klik tanda X di sebelah font kustom untuk menggunakan font default tema.

📌

Font muncul di blog atau situs Anda beberapa menit setelah disimpan. Cache browser mungkin perlu dihapus agar versi situs yang ditampilkan merupakan yang terbaru.

Mengatur Font ke Semula

Untuk mengembalikan font ke font default tema, klik tanda X di sebelah font aktif.

  1. Buka Tampilan → Sesuaikan
  2. Klik Font.
  3. Klik tanda X di sebelah font kustom yang dipilih untuk mengatur font ke font default tema.
  4. Klik Simpan Perubahan.
Pilihan Menyesuaikan Font yang menunjukkan kursor mengeklik tanda X di sebelah Font Judul dan Font Dasar agar font kembali ke font default tema.

Menerapkan Font untuk Bagian Teks Tertentu

Saat memilih font, pilihan yang ditampilkan adalah untuk mengatur font di situs secara global, bukan untuk halaman atau bagian teks tertentu. Menurut praktik terbaik dalam desain, situs tampak menarik dengan font yang konsisten di seluruh bagian. Terlalu banyak jenis font dalam satu situs akan membuat tampilan ruwet.

Agar teks tertentu tampak lebih menonjol, Anda bisa menggunakan cara lain, seperti membedakan warnanya, menggunakan blok Kutipan, atau menyisipkan gambar.

Menggunakan Font Kustom

Anda bisa menggunakan plugin yang dapat menambahkan font ke situs. Ada banyak plugin yang bisa digunakan untuk menambahkan font Anda sendiri ke situs. Untuk menentukan plugin yang cocok, lihat rating dan jumlah ulasan positif serta cari tahu dukungan seperti apa yang bisa didapatkan dari Pengembang Plugin. Jika Anda memutuskan untuk tidak menggunakan plugin setelah mengujinya, pastikan untuk menonaktifkan/menghapus plugin tersebut agar daftar plugin Anda tetap bersih.

💡

Bingung memilih font? Coba cek pos tentang sembilan font tegak bersambung gratis nan elegan ini untuk mendapatkan inspirasi.

Pertanyaan Umum

Bisakah saya menghubungkan akun Typekit.com ke situs WordPress.com saya?

Anda tidak bisa menghubungkan akun Typekit.com ke situs atau blog WordPress.com.

Akankah font muncul dalam bahasa saya?

Jika Anda memilih rumpun bahasa non-Latin untuk blog di menu Pengaturan → Umum, semua karakter dari font kustom akan dimuat. Jika Anda memilih rumpun bahasa Latin, seperti bahasa Inggris, Italia, Portugis, atau Spanyol, hanya beberapa bagian font yang akan dimuat. Jika beberapa karakter tidak ditampilkan dengan benar di blog, cek pengaturan bahasa terlebih dahulu untuk memastikan bahasa yang dipilih adalah bahasa yang Anda gunakan dalam menulis blog. Selanjutnya, buka Customizer → Font lalu simpan kembali font untuk memperbarui ke pengaturan bahasa yang baru.

Bagaimana cara mengetahui jika font yang ingin saya gunakan didukung untuk bahasa saya?

Cara paling efektif untuk memastikan font ditampilkan dengan benar dalam bahasa apa pun adalah dengan mencoba font tersebut di Customizer dan memastikan font yang ditampilkan bukan font default tema. Untuk saat ini, belum ada aksara bahasa Asia yang didukung. Kebanyakan kelompok font, tetapi tidak semua, mendukung Alfabet Kiril. Dukungan bahasa yang lebih luas akan terus tumbuh dan berkembang di masa depan.

Mengapa font berbeda muncul sesaat sebelum font yang saya pilih?

Ini disebut sebagai Flash of Unstyled Text (FOUT). Jika koneksi lambat, teks akan ditampilkan dengan font default tema terlebih dahulu. Dengan demikian, ketimbang harus menunggu dan melihat halaman kosong, pengunjung bisa langsung membaca teks sebelum font kustom berhasil termuat. Artinya, ada tampilan singkat font lain sebelum halaman selesai dimuat agar pembaca tidak melihat layar kosong saat koneksi lambat. Jika tidak ingin menggunakan metode ini, tambahkan baris kode CSS berikut menggunakan Editor CSS yang bisa diakses dari menu Tampilan → Sesuaikan → CSS Tambahan (untuk paket Premium, Bisnis, dan eCommerce serta paket Pro lawas):

.wf-loading body { visibility: hidden; }

atau

html:not(.wf-active) body { display: none; }

Google Fonts dan GDPR

Semua permintaan akses ke font dari Google Fonts yang digunakan di tema-tema WordPress.com diproses oleh server milik WordPress.com dan bukan lagi oleh CDN/FDN milik Google. Kebijakan ini berlaku sejak Desember 2022.

Jika situs menggunakan pugin kustom atau tema pihak ketiga, konsultasikan dengan pengembang plugin dan/atau tema guna memastikan bahwa CDN/FDN milik Google tidak digunakan untuk menampilkan font dari Google Fonts.

Baca selengkapnya tentang GDPR di sini.

Copied to clipboard!