Cara Mengubah Font di WordPress

Apakah Anda ingin menyesuaikan situs Anda dan mengubah tipografi? Pada artikel ini, kami akan menunjukkan cara mengubah font di WordPress agar situs Anda terlihat profesional dan bergaya.

Tipografi situs web penting. Tidak hanya memberi situs Anda gaya tertentu, tetapi juga dapat membuat atau menghancurkan pengalaman pengguna. Jika font Anda tidak ramah pengguna, pengunjung cenderung meninggalkan situs Anda.

Tipografi yang Anda gunakan harus sesuai dengan apa yang Anda coba komunikasikan dengan situs Anda. Apakah situs Anda menjual layanan konsultasi atau situs fotografi? Seperti yang dapat Anda bayangkan, tema dan font yang digunakan kedua situs web ini sangat berbeda.

Anda dapat melihat beberapa font gratis untuk digunakan di dalam pustaka Google Font. Jika Anda mencari font premium seperti Proxima-Nova, Anda harus memeriksa Typekit oleh Adobe. Kedua perpustakaan font hadir dengan banyak font ramah pengguna yang sesuai dengan bisnis Anda.

Cara Mengubah Font di WordPress

Ada beberapa metode untuk mengubah font di WordPress:

1. Opsi default WordPress (Gutenberg/Editor Klasik)
2. Secara manual dengan CSS
3. Menggunakan plugin khusus
4. Hosting font Anda sendiri
5. Integrasi font web

Dalam panduan ini, kami akan menunjukkan setiap metode langkah demi langkah sehingga Anda dapat memilih yang terbaik untuk situs Anda.

1) Opsi Default WordPress

Secara default, WordPress menawarkan dua opsi untuk menyesuaikan tipografi: dengan Gutenberg atau menggunakan editor Klasik.

1.1) Dengan Gutenberg

Versi terbaru WordPress hadir dengan editor baru: editor Gutenberg. Ini adalah alat canggih yang dilengkapi dengan beberapa blok dan sangat mudah digunakan.

Untuk mengubah font, buka posting atau halaman dan pilih teks yang ingin Anda ubah.

Di sisi kanan, Anda akan melihat opsi tipografi.

Di sana, Anda akan melihat beberapa opsi untuk mengubah ukuran font:

• Bawaan
• Kecil
• Sedang
• Besar
• Sangat besar
• Kebiasaan

Anda dapat memilih salah satu dari ukuran yang telah ditentukan ini atau menambahkan yang khusus. Misalnya, jika kita memilih 20px sebagai ukuran font, kita akan melihat perubahan di editor.

Dengan cara ini, Anda dapat dengan mudah memodifikasi blok Anda dan menetapkan ukuran font khusus untuknya.

1.2) Menggunakan Editor Klasik

Jika Anda lebih suka mengelola tipografi melalui Editor Klasik, Anda perlu menginstal dan mengaktifkan plugin Advanced Editor Tools (TinyMCE Advanced).

Setelah Anda mengaktifkan plugin, buka editor konten Anda dan Anda akan melihat beberapa alat tambahan.

Dari dropdown, Anda dapat mengubah jenis dan ukuran font. Ada beberapa Google Font dan ukuran yang dapat Anda pilih untuk menyesuaikan situs Anda.

Dengan opsi ini, Anda dapat memilih paragraf apa saja dan memilih font dan ukuran apa pun dari dropdown.

2) Secara manual dengan Kode CSS Kustom

Cara lain untuk mengubah font Anda di WordPress adalah dengan menggunakan kode CSS khusus. Secara default, tema datang dengan ukuran font tertentu yang berlaku di seluruh situs. Namun, terkadang Anda mungkin ingin menyesuaikannya untuk memberikan gaya yang berbeda pada situs Anda.

Untuk melakukan ini, pertama, di dasbor WordPress Anda, buka Appearance > Customize > Additional CSS . Di bagian ini, Anda dapat menambahkan kode khusus dan mengedit situs Anda.

Ubah font tubuh

Misalnya, untuk mengubah ukuran font tubuh Anda lebar situs menjadi 16 px, Anda perlu menggunakan kode CSS ini:

 body { font-size : 16px; }

Ubah font paragraf

Demikian pula, jika Anda mencari cara untuk menyesuaikan ukuran font paragraf menjadi 16 px, Anda harus menggunakan kode CSS ini:

p {
font-size : 16px;
}

Sesuaikan font judul

Selain itu, jika Anda perlu mengubah ukuran font heading, Anda dapat menggunakan kode di bawah ini:

.entry-content h2 {
font-size : 36px;
}

.entry-content h3 {
font-size : 30px;
}

.entry-content h4 {
font-size : 26px;
}

.entry-content h5 {
font-size : 22px;
}

.entry-content h6 {
font-size : 20px;
}

Ini hanya contoh jadi pastikan Anda menyesuaikan ukuran font sesuai dengan kebutuhan Anda. Saat kami menggunakan penyesuai untuk membuat perubahan ini, Anda dapat melihat perubahan secara langsung di sisi kanan.

Setelah Anda puas dengan penyesuaian, simpan perubahan dan tekan Publish .

Ubah keluarga font

Selain itu, untuk mengubah keluarga font di seluruh situs, Anda dapat menggunakan kode ini:

 * {font-family:"Verdana", Verdana, sans-serif}

Tanda bintang (*) akan menerapkan perubahan ke seluruh situs, jadi jika Anda hanya ingin menerapkan perubahan pada halaman atau posting tertentu, hapus dari kode. Untuk informasi lebih lanjut tentang font CSS, lihat situs ini.

Selain itu, Anda juga dapat mengubah gaya font. Misalnya, jika Anda ingin membuat judul 2 dan 3 miring, gunakan kode ini:

 h2, h3 { font-style : italics ; }

Jika Anda ingin menerapkan perubahan serupa pada tema Anda, Anda dapat menulis kode Anda langsung pada file style.css dari tema anak Anda. Ingatlah bahwa ini akan menerapkan perubahan di seluruh situs, jadi pastikan Anda membuat cadangan lengkap situs Anda sebelum melanjutkan.

3) Dengan Plugin

Anda juga dapat mengubah font di WordPress dengan plugin khusus. Di bagian ini, kami akan menunjukkan cara mengintegrasikan Google Font dengan situs Anda. Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Easy Google Fonts.

Setelah itu, Anda dapat mengubah font situs web Anda. Buka Appearance > Customize dan dari Customizer , Anda akan dapat mengontrol tipografi situs web Anda. Di sisi kiri, Anda akan melihat opsi penyesuaian baru yang disebut Tipografi .

Pilih dan Anda akan melihat layar dengan beberapa opsi untuk mengubah seluruh tipografi untuk paragraf dan heading.

Katakanlah Anda ingin mengubah font paragraf Anda, jadi buka opsi Edit Font .

Dari sana, Anda dapat mengubah:

• Skrip/Subset
• Keluarga font
• Berat font
• Dekorasi teks
• Transformasi teks

Jika Anda perlu mengubah tampilan font, buka tab berikutnya tempat Anda dapat mengubah:

• Warna huruf
• Warna latar belakang
• Ukuran huruf
• Tinggi garis
• Spasi huruf

Terakhir, dari tab Positioning, Anda dapat menyesuaikan:

• Batas
• Lapisan
• Berbatasan
• Radius Perbatasan
• Menampilkan

Mengubah font

Opsi penyesuaian ini sangat bagus untuk membawa tipografi Anda ke tingkat berikutnya. Misalnya, Anda ingin mengubah keluarga font di situs WordPress Anda. Dari tab Styles , pilih font yang ingin Anda gunakan.

Jika Anda memiliki keluarga font tertentu, Anda dapat menggunakan fitur pencarian. Untuk demo ini, kita akan menggunakan font Work Sans.

Karena kami menggunakan Penyesuai WordPress untuk membuat perubahan ini, setiap pembaruan akan terlihat di pratinjau langsung. Misalnya, ketika kita mengubah font tema default menjadi Work Sans, kita dapat melihat perubahan secara real-time.

Demikian pula, Anda juga dapat memodifikasi berat font, dekorasi teks, dan transformasi, serta judul Anda.

Setelah Anda selesai dengan kustomisasi font paragraf, pindah ke opsi font Heading 1. Anda dapat memilih heading apa saja dari daftar tetapi untuk tutorial ini, kita akan fokus pada Heading 1.

Seperti yang kita lakukan sebelumnya, kita akan mengubah keluarga font. Dalam hal ini, kami akan memilih Roboto Slab.

Dengan mengikuti metode sederhana ini, Anda dapat mengubah font paragraf dan heading Anda. Karena plugin ini hadir dengan sebagian besar Google Font terintegrasi, Anda memiliki banyak opsi untuk dipilih. Selain itu, opsi penyesuaian gaya sangat mudah digunakan sehingga seluruh proses dapat diakses oleh setiap pengguna.

4) Hosting Font Anda Sendiri

Jika Anda memiliki beberapa font khusus di komputer lokal Anda, Anda dapat menghostingnya di server web Anda. Di bagian ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat meng-host font Anda sendiri dan mengubah tipografi Anda di WordPress.

Untuk melakukan ini, Anda perlu mengakses pengelola file server web Anda untuk membuat folder khusus dan mengunggah font. Jika Anda menggunakan salah satu perusahaan hosting WordPress paling populer, Anda mungkin memiliki akses ke cPanel yang mudah digunakan. Atau, jika Anda menggunakan layanan hosting terkelola seperti Kinsta atau WP Engine, Anda harus menggunakan klien FTP seperti FileZilla atau plugin pengelola file khusus.

Untuk demo ini, kami akan menggunakan lingkungan staging, jadi mengubah file inti dan mengunggah file khusus akan cukup mudah.

Sebelum mengunggah font Anda langsung ke folder tema Anda, untuk mempermudah pengelolaan, Anda harus membuat folder baru bernama fonts . Kemudian Anda dapat mengunggah semua font khusus Anda ke folder ini untuk aksesibilitas yang mudah.

Setelah Anda membuat folder, buka. Di sinilah Anda akan mengunggah file font khusus Anda.

Sekarang, Anda perlu menemukan font yang Anda rencanakan untuk digunakan. Untuk demonstrasi ini, kami akan menggunakan Lato, file font dari Google Font, tetapi Anda dapat memilih font apa pun yang Anda suka.

Setelah Anda memilih font, Anda akan diarahkan ke halaman khusus dan Anda akan melihat tombol Unduh keluarga di sana.

Setelah Anda menekan tombol itu, keluarga font akan diunduh ke komputer Anda sebagai file .zip . Buka zip dan unggah file ke folder font Anda.

Itu langkah pertama. Sekarang mari kita lihat bagaimana melangkah lebih jauh dan mengintegrasikan font Anda dengan tema Anda.

Integrasikan font Anda dengan CSS

Sekarang, Anda dapat mulai mengintegrasikan font ini dengan tema Anda dengan sedikit CSS khusus. Buka Penyesuai WordPress , buka bagian CSS Tambahan , dan salin kode CSS dari bawah.

 @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Medium.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : normal ; font-style : normal ; } @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Bold.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : bold ; font-style : normal ; }

Jika Anda melihat kode CSS, Anda akan melihat bahwa itu menyebutkan tiga hal utama.

• Keluarga font
• URL sumber
• Berat font

Saat Anda menempelkan kode CSS ini ke Customizer Anda, Anda perlu memperbarui beberapa bagian tergantung pada font yang Anda pilih. Pertama, Anda perlu memperbarui keluarga font. Dalam kode kami, Lato adalah keluarga font, jadi Anda harus menggantinya dengan font pilihan Anda. Anda dapat menemukan keluarga font di header.

Setelah itu, Anda perlu menyesuaikan jalur ke font. Jika Anda telah mengikuti langkah-langkah yang dijelaskan di atas, Anda telah mengunggah file font di dalam folder bernama fonts . Jadi cukup ubah baris src : url ( “fonts/Lato-Bold.ttf” dengan fonts/your-font-name.ttf , dan Anda siap melakukannya.

Selain itu, Anda dapat mengubah berat font sesuai dengan kebutuhan Anda. Jika Anda menggunakan font untuk paragraf, bobot font normal akan berfungsi, tetapi Anda juga dapat mengubah nilainya.

Selain itu, Anda dapat mengubah font heading Anda dengan kode CSS berikut:

 h1 { font-family : 'Lato' , Georgia , serif ; }

Dan jika Anda ingin mengubah font paragraf Anda, gunakan kode CSS ini:

p {
font-family : 'Lato' , Georgia , serif ;

}

Di sisi lain, jika Anda perlu mengubah seluruh font situs web Anda, gunakan kode CSS ini:

body {
font-family : 'Lato' , Georgia , serif ;

}

Dengan cara ini, Anda dapat dengan mudah mengubah font di WordPress. Seperti yang Anda lihat, ini adalah metode ramah pemula yang mudah diterapkan terlepas dari pengetahuan pengkodean Anda.

5) Integrasi Font Web

Mengintegrasikan font web adalah cara mudah lain untuk menyesuaikan font di WordPress. Alih-alih menghosting font di server kami, kami akan memanggil font pihak ketiga melalui tautan unik, yang menyajikan font. Hal yang baik tentang integrasi font web adalah Anda tidak perlu menghosting font apa pun secara manual dan bergantung pada perangkat lunak FTP apa pun.

Untuk integrasi font web, pertama, buka Google Font dan pilih font dan gaya yang Anda suka.

Di sisi kanan Anda, Anda akan melihat kode untuk menyematkan font. Salin.

Dalam kasus kami, kode font adalah:

 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2? family= Spartan & display=swap" rel="stylesheet">

Kemudian, Anda perlu mengedit file functions.php tema Anda untuk memanggil font. Tetapi sebelum itu, Anda harus menyesuaikan kodenya. Yang Anda butuhkan hanyalah URL keluarga font yang dalam kasus kami adalah:

https://fonts.googleapis.com/css2? keluarga = Spartan

Setelah Anda mendapatkan URL, buka file functions.php tema Anda. Anda dapat menggunakan tema anak atau plugin untuk memodifikasi file inti tema. Kemudian, rekatkan kode berikut.

 function quadlayers_add_google_fonts ( ) { wp_register_style ( 'googleFonts' , 'https://fonts.googleapis.com/css2?family=Spartan' ) ; wp_enqueue_style ( 'googleFonts' ) ; } add_action ( 'wp_enqueue_scripts' , 'quadlayers_add_google_fonts' ) ;

CATATAN : Pastikan untuk mengubah URL dengan font yang Anda pilih.

Setelah memperbarui file, Anda akan berhasil mengintegrasikan font dengan situs web Anda. Sekarang, Anda dapat menggunakan kode CSS untuk menentukan font. Seperti yang kita lakukan sebelumnya, untuk mengubah font body, Anda dapat menggunakan kode ini:

body {
font-family : 'Spartan' , Georgia , serif ;

}

Setelah itu, perbarui keluarga font sesuai dengan Google Font Anda dan selesai.

Kami telah melihat berbagai metode untuk mengubah font di WordPress. Tapi itu tidak semua. Anda juga dapat melangkah lebih jauh dan menyesuaikan font lebih banyak lagi.

Cara Menambahkan Font Kustom ke WordPress

Mengubah font adalah awal yang baik tetapi jika Anda ingin menonjol dari pesaing Anda dan membuat situs web yang unik, Anda mungkin ingin menambahkan font khusus ke situs Anda. Ada empat cara untuk mengintegrasikan Google Font dengan instalasi WordPress.

• Dengan plugin font khusus
• Memodifikasi file functions.php
• Mengedit file header.php
• Melalui file style.css

Untuk informasi lebih lanjut tentang cara menambahkan font khusus ke situs Anda menggunakan masing-masing metode tersebut, lihat panduan lengkap kami.

Bonus: Cara Mengubah Font Tema di Area Tertentu

Alih-alih mengubah font di seluruh situs, Anda dapat menerapkan perubahan ke area tertentu. Untuk melakukan ini, klik kanan pada halaman yang ingin Anda ubah fontnya dan pilih Inspect .

Ini akan membuka konsol baru di sisi kanan Anda.

Anda dapat mengarahkan mouse ke elemen untuk melihat nilai CSS yang tepat dari masing-masing elemen.

Dalam hal ini, kita akan mengubah font judul (h1), sehingga kelas CSS adalah entry-title .

Kemudian, di dashboard WordPress Anda pergi ke Appearance > Customize > Additional CSS dan paste kode CSS berikut untuk mengubah font judul postingan.

CATATAN : Font yang ingin Anda gunakan harus sudah terintegrasi dengan situs Anda.

 .entry-title { font-family: 'Lato', Georgia, serif; }

Cukup sesuaikan kode dengan font yang ingin Anda gunakan di situs web Anda.

Itu dia! Dengan cara ini, Anda dapat dengan mudah mengubah font di area tertentu. Pastikan Anda menggunakan kelas CSS yang benar untuk itu, jika tidak maka tidak akan berfungsi.

Bagaimana Mengubah Warna Font

Selain mengubah font, Anda mungkin juga ingin mengubah warna font untuk membuat situs unik dan memberikan pengalaman pengguna yang lebih baik kepada pengunjung. Kabar baiknya adalah Anda dapat mencapainya tanpa menggunakan plugin apa pun.

Mari kita lihat bagaimana Anda dapat mengubah warna font di situs Anda menggunakan kode CSS sederhana.

Katakanlah Anda memiliki halaman dengan beberapa judul seperti ini:

Untuk mengubah warna judul, pertama, Anda perlu menemukan kelas CSS yang sesuai. Misalnya, untuk mengubah warna font h2, Anda harus menemukan kelasnya dengan mengklik kanan padanya dan menekan Inspect .

Dalam hal ini, kelas CSS adalah .entry-content h2 .

Setelah itu buka WordPress Customizer, masuk ke bagian Additional CSS dan paste kode CSS berikut:

 .entry-content h2 { color : #f542f5 ; }

Seperti yang Anda lihat, warna heading 2 berubah menjadi merah.

Dengan cara ini, Anda juga dapat memodifikasi semua judul Anda. Yang perlu Anda lakukan adalah, ganti h2 dengan tag heading pilihan Anda.

Atau, jika Anda ingin mengubah font paragraf Anda, gunakan kode CSS ini:

 .entry-content p { color : blue ; }

Gunakan kode sebagai dasar dan pilih warna yang Anda inginkan untuk setiap bagian situs Anda.

Itu dia! Begitulah cara Anda dapat dengan mudah mengubah warna font.

Bagaimana mengidentifikasi font dari situs web dan gambar

Opsi menarik lainnya saat Anda menjelajahi web adalah dapat mengidentifikasi font dari situs web dan gambar.

Ada berbagai cara untuk mengetahui tipografi yang digunakan situs. Cara termudah adalah dengan menggunakan alat inspeksi browser. Setelah Anda menemukan font yang Anda sukai, cukup klik kanan pada teks yang berisi font tersebut dan buka Inspect (di beberapa browser Anda mungkin perlu membuka Web Developer > Developer Tool ). Anda akan melihat bahwa elemen tersebut akan disorot dan Anda akan dapat melihat gaya dan tata letak pada inspektur.

Setelah itu, buka tab Computed dan temukan bidang Font-Family di mana Anda akan melihat font situs web.

Selain itu, Anda dapat mengidentifikasi font dari gambar menggunakan alat yang disebut WhatTheFont. Untuk informasi lebih lanjut tentang cara mendapatkan informasi tentang font dari situs web dan gambar, kami sarankan Anda membaca panduan kami tentang cara mengidentifikasi font.

Kesimpulan

Secara keseluruhan, dengan menyesuaikan tipografi di situs Anda, Anda dapat memberi situs Anda gaya yang berbeda dan meningkatkan pengalaman pengguna di situs Anda agar menonjol dari pesaing Anda.

Dalam panduan ini, kami telah melihat berbagai metode untuk mengubah font di WordPress:

• Editor Default (Gutenberg dan Editor Klasik)
• Kode CSS khusus
• Dengan plugin
• Hosting font Anda sendiri
• Integrasi font web

Metode paling sederhana dalam daftar adalah dengan menggunakan Gutenberg atau Editor Klasik. Ini memungkinkan Anda untuk memodifikasi font dalam beberapa klik dan melihat perubahan secara real-time. Atau, jika Anda ingin menyesuaikan ukuran font, gaya, dan warna, Anda dapat menggunakan kode CSS.

Solusi hebat lainnya adalah dengan menggunakan plugin khusus. Tanpa menulis kode apa pun, Anda dapat mengubah font situs web Anda melalui penyesuai dan mengambil kendali penuh atas tipografi situs Anda.

Hosting font web Anda sendiri juga merupakan pilihan yang baik jika Anda memiliki file font. Jika Anda memilih untuk tidak meng-host font di server Anda, di sisi lain, mengintegrasikan font web adalah cara mudah untuk menyesuaikan font Anda. Keuntungan utama dari metode ini adalah Anda harus meng-host font atau mengandalkan perangkat lunak FTP. Namun, perlu diingat bahwa memanggil font web dapat meningkatkan permintaan HTTP di situs Anda, jadi Anda perlu mengoptimalkan permintaan untuk menghindari masalah kinerja dan kecepatan.

Kami harap Anda menikmati panduan ini dan merasa berguna. Jika Anda melakukannya, silakan bagikan di media sosial. Untuk tutorial dan panduan lebih lanjut, lihat blog kami.

Metode mana yang Anda gunakan untuk mengubah font di situs Anda? Apakah Anda mengetahui metode lain yang harus kami tambahkan? Beri tahu kami di bagian komentar di bawah!