Cara yang bagus untuk menambahkan beberapa branding dan individualisme ke situs WordPress Anda adalah dengan mengubah font di tema Anda.

Tipografi dan elemen pita lainnya menciptakan kesan pertama yang baik, mengatur suasana hati pengunjung situs Anda, dan membangun identitas merek Anda. Studi^(Studies) juga menemukan bahwa font mempengaruhi kemampuan pembaca untuk belajar, mengingat informasi, dan menghafal teks.

Jika Anda baru saja menginstal tema WordPress^{(installed a WordPress theme)} atau memiliki pengalaman CSS dan pengkodean, kami akan menunjukkan kepada Anda beberapa opsi yang dapat Anda gunakan untuk mengubah font di WordPress .

Cara Mengubah Font di WordPress^{(How to Change Fonts in WordPress)}

Ada tiga opsi utama yang tersedia bagi Anda untuk mengubah font di WordPress:

• Gunakan font web seperti Google Fonts , Fonts.com , atau Adobe Edge Web Fonts , yang dihosting di situs pihak ketiga
• Kodekan^(Code) font web ke dalam tema Anda dan buat antrean
• Host font di situs Anda dan tambahkan ke tema Anda

1. Cara Mengubah Font di WordPress Menggunakan Web Font^{(1. How to Change Fonts in WordPress Using Web Fonts)}

Menggunakan font web adalah cara yang lebih mudah dan lebih cepat untuk mengubah font di WordPress daripada mengunduh dan mengunggah file font.

Dengan opsi ini, Anda dapat mengakses berbagai font^{(access a variety of fonts)} tanpa memperbaruinya setiap kali ada perubahan, dan tidak memakan ruang server di hosting Anda. Font disajikan langsung dari server penyedia menggunakan plugin atau dengan menambahkan kode ke situs Anda.

Pastikan^(Make) font web yang Anda pilih untuk situs Anda cocok dengan identitas merek Anda, mudah dibaca untuk teks isi, akrab bagi pengunjung situs web, dan menyampaikan jenis suasana hati dan gambar yang Anda inginkan.

Anda dapat menambahkan font web menggunakan plugin WordPress^{(using a WordPress plugin)} atau secara manual dengan menambahkan beberapa baris kode ke situs Anda. Mari kita jelajahi kedua opsi tersebut.

Cara Menambahkan Font Web Menggunakan Plugin WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

Bergantung pada font web yang Anda pilih, Anda dapat menggunakan plugin WordPress untuk mengakses perpustakaan font dan memilih font yang Anda inginkan di situs Anda. Untuk panduan ini, kami memilih Google Fonts dan menggunakan plugin Google Fonts Tipografi .^{(Google Fonts Typography)}

1. Untuk memulai, masuk ke dasbor admin WordPress Anda, dan pilih ^(WordPress)Plugins > Add New .

1. Ketik Tipografi Font Google^{(Google Fonts Typography)} di kotak pencarian, dan pilih Instal Sekarang^{(Install Now)} .

1. Pilih Aktifkan^(Activate) .

1. Selanjutnya, akses Customizer dengan masuk ke Appearance > Customize .

1. Pilih bagian Google Font^{(Google Fonts)} .

1. Selanjutnya, klik tautan untuk membuka pengaturan font dan mengonfigurasinya sebagai berikut:

• Di bawah Pengaturan Dasar^{(Basic Settings)} , atur font default untuk teks isi, judul, dan tombol Anda.

• Di bawah Pengaturan Lanjut^{(Advanced Settings)} , konfigurasikan judul dan deskripsi situs Anda, menu, judul dan konten, bilah sisi, dan footer.

• Hapus centang^(Uncheck) pada bobot font yang tidak diinginkan di bagian Pemuatan Font^{(Font Loading)} untuk menghindari memperlambat situs Anda^{(avoid slowing down your site)} .

Jika ada font di situs Anda yang tidak ditampilkan atau tidak berfungsi dengan baik, gunakan bagian Debugging untuk memecahkan masalah.

1. Anda dapat menguji setelan ini di Penyesuai^(Customizer) untuk memastikan setelan tersebut berfungsi seperti yang Anda inginkan, lalu pilih Terbitkan^(Publish) .

Catatan^(Note) : Jika Anda lupa memilih publikasikan di Penyesuai^(Customizer) , Anda akan kehilangan semua perubahan yang telah Anda buat.

Cara Menambahkan Font Web Menggunakan Kode^{(How to Add Web Fonts Using Code)}

Anda dapat menginstal dan menggunakan font web jika Anda memiliki akses ke kode tema Anda. Ini adalah alternatif manual untuk menambahkan plugin tambahan, tetapi tidak rumit jika Anda mengikuti langkah-langkahnya dengan cermat.

Namun, ada beberapa langkah yang harus diambil jika Anda menggunakan tema dari direktori tema WordPress atau tema yang disesuaikan.

Jika Anda membeli tema dari direktori tema WordPress , buat tema anak^{(create a child theme)} dan berikan file style.css dan functions.php. Lebih mudah jika Anda memiliki tema yang disesuaikan karena Anda dapat mengedit lembar gaya dan file fungsi dari tema Anda.

1. Untuk memulai, pilih font dari perpustakaan Google Font^{(Google Fonts)} , dan pilih ikon + (plus) untuk menambahkannya ke perpustakaan Anda.

1. Selanjutnya, pilih tab di bagian bawah tempat Anda akan menemukan kode untuk ditambahkan ke situs Anda. Buka bagian Embed font di bawah tab Embed . Anda akan menemukan kode yang dihasilkan oleh Google Fonts , yang terlihat seperti ini:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Catatan^(Note) : Kami memilih Work Sans untuk panduan ini sehingga nama font mungkin berbeda tergantung pada apa yang Anda pilih.

1. Salin bagian kode ini: https://fonts.googleapis.com/css2?family=Work+Sans

Ini memungkinkan Anda untuk mengantrekan gaya dari server Google Fonts untuk mencegah konflik dengan plugin pihak ketiga. Ini juga memungkinkan modifikasi tema anak yang lebih mudah.

1. Untuk enqueue font, buka file fungsi dan tambahkan kode berikut. ( Ganti^(Replace) tautan dengan tautan yang Anda dapatkan dari Google Font^{(Google Fonts)} ):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts');

1. Anda dapat menambahkan baris baru ke fungsi Anda atau ke baris yang sama jika Anda ingin menambahkan lebih banyak font di masa mendatang sebagai berikut:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts');

Dalam hal ini, kami telah mengantrekan font Cambria dan Work Sans .

Langkah selanjutnya adalah menambahkan font ke lembar gaya tema Anda untuk membuat font berfungsi di situs Anda.

1. Untuk melakukannya, buka file style.css tema Anda dan tambahkan kode untuk menata elemen individual dengan font web Anda sebagai berikut:

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', serif;
}

Dalam hal ini, font utama adalah Work Sans sedangkan elemen header seperti h1, h2, dan h3 akan menggunakan Cambria .

Setelah selesai, simpan lembar gaya dan periksa apakah font Anda berfungsi sebagaimana mestinya. Jika tidak, periksa apakah font tidak diganti di lembar gaya, atau kosongkan cache browser Anda dan coba lagi.

1. Siapkan font cadangan untuk memastikan font dapat dirender atau diakses dengan mudah terutama untuk pengguna dengan perangkat lama, koneksi buruk, atau jika penyedia font memiliki masalah teknis. Untuk melakukan ini, buka stylesheet dan edit CSS untuk membaca sebagai berikut:

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Jika semuanya baik-baik saja, pengunjung situs Anda akan melihat font web default Anda, dalam kasus kami Work Sans dan Cambria . Jika ada masalah, mereka akan melihat font cadangan, misalnya Arial atau Times New Roman dalam kasus kami.

2. Cara Mengubah Font di WordPress dengan Hosting Font^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

Menghosting font di server Anda sendiri membantu Anda mengoptimalkan kinerja font web Anda, tetapi juga merupakan cara yang lebih aman untuk^{(a more secure way)} melakukannya daripada menarik sumber daya dari situs pihak ketiga.

Google Font dan font web lainnya memungkinkan Anda mengunduh font untuk digunakan sebagai font yang dihosting secara lokal, tetapi Anda masih dapat mengunduh font lain ke komputer Anda asalkan lisensi mengizinkan Anda melakukannya.

1. Untuk memulai, unduh, buka zip, unggah file font ke situs Anda, lalu tautkan di lembar gaya Anda. Dalam hal ini Anda tidak perlu mengantrekan font di file functions.php seperti yang Anda lakukan dengan font web. Konfirmasikan bahwa file yang Anda unggah dalam format .woff sebelum menggunakannya di situs web Anda.

1. Selanjutnya, buka wp-content/themes/themename untuk mengunggah file font ke tema Anda. 
2. Buka stylesheet dan tambahkan kode berikut (dalam hal ini kami menggunakan font Work Sans tetapi Anda dapat menggantinya dengan font Anda sendiri):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
gaya font: normal; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
gaya font: normal; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
gaya font: normal; ^{( font-style: normal;)}
}

Catatan^(Note) : Menggunakan @fontface memungkinkan Anda untuk menggunakan huruf tebal, miring, dan variasi font lainnya, setelah itu Anda dapat menentukan bobot atau gaya untuk setiap font.

1. Selanjutnya, tambahkan gaya untuk elemen Anda sebagai berikut:

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Sesuaikan Tipografi WordPress Anda^{(Customize Your WordPress Typography)}

Mengubah font di WordPress adalah ide bagus untuk meningkatkan branding dan pengalaman pengguna. Ini bukan tugas yang mudah, tetapi Anda akan memiliki kontrol lebih besar atas tema Anda.

Apakah^(Were) Anda dapat menyesuaikan font situs Anda menggunakan langkah-langkah menggunakan tips dalam panduan ini? Beritahu^(Tell) kami di komentar.

How to Change Fonts in WordPress

A great waу to add some branding and indiνіdualism to your WordPrеss site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

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

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Bagaimana memindahkan WordPress site dari satu host ke yang lain

• Cara Memasang & Setup WordPress pada Microsoft Azure

• Bagaimana menjalankan blazingly cepat WordPress di Microsoft Azure

• Cara mengkonfigurasi Privacy di WordPress dan mengapa ini penting

• Bagaimana menginstal WordPress di Google Cloud Platform

• Cara Mencadangkan Situs WordPress Anda

• Must Have WordPress Yoast SEO Settings 2021

• 10 Plugin WordPress Penting Untuk Situs Web Bisnis Kecil

• Cara Mengatur WordPress Secara Manual di Domain

• Cara Melacak Broken Links dengan Google Webmaster Tool

• Tutorial Gutenberg WordPress: Cara Menggunakan Editor Baru

• Cara Membuat WordPress Site Secure

• Cara Membuat Kupon Popup Anda Sendiri di WordPress

• Cara Mempercepat Situs WordPress Apa Pun Menggunakan .HTACCESS

• 9 Harus Memiliki Plugin Untuk Instalasi WordPress Baru

• Cara Melindungi Halaman dengan Kata Sandi di Situs WordPress Anda

• Cara Memasang Tema di WordPress

• Squarespace Vs WordPress: Platform Situs Mana yang Lebih Baik?

• Cara Mengedit Footer di WordPress

• Cara Memasang Situs Uji WordPress di Komputer Anda