Cara Menambahkan Font Kustom ke Tema WordPress

Font memainkan peran utama dalam desain situs web Anda, keterbacaan, dan terkadang bahkan fungsionalitas. Pilih yang salah dan Anda dapat merusak situs web yang tampak hebat. Demikian pula, gaya dan ukuran font dapat menentukan seberapa mudah (atau sebaliknya!) situs web Anda digunakan. Tapi apa yang Anda lakukan jika font ideal Anda tidak tersedia di tema WordPress Anda? Pada artikel ini kita akan melihat beberapa cara Anda dapat menggunakan font kustom pilihan Anda.

Mari kita pergi!

Mengapa Menggunakan Font Kustom

Banyak tema kini hadir dengan pilihan font untuk Anda pilih yang 'dipanggang'. Ini dalam banyak kasus cocok untuk situs web yang Anda rancang. Tetapi, jika Anda tidak dapat memilih font yang tepat dengan font yang sudah ditawarkan, maka inilah saatnya untuk melihat font alternatif dan ini berarti Anda harus dapat menambahkan font khusus ke situs web Anda.

Menggunakan font khusus memungkinkan Anda memanfaatkan kombinasi indah dari berbagai font di situs web Anda untuk meningkatkan tipografi dan pengalaman pengguna. Penelitian telah menunjukkan ada manfaat yang signifikan dari menggunakan tipografi yang tepat. Ini tidak hanya mencakup peningkatan pengalaman pengguna secara keseluruhan tetapi bahkan seberapa baik informasi di situs web diproses oleh otak. Semakin mudah ini, maka semakin mudah untuk mengkomunikasikan penawaran/layanan bisnis Anda kepada pelanggan Anda.

Meskipun menggunakan font khusus pasti dapat meningkatkan kegunaan situs web Anda, penting untuk tidak menjadi gila font! Pilihan dua font yang telah dipasangkan dengan hati-hati harus cukup. Lebih banyak lagi, dan Anda dapat mengambil risiko memperlambat situs web Anda.

Mari kita buka dan lihat opsi yang tersedia bagi kita untuk menambahkan font khusus ke situs web WordPress kita.

Tambahkan Google Font dengan Plugin Google Font

Cara termudah dan terpopuler untuk menambahkan font khusus ke situs WordPress Anda adalah dengan menggunakan Plugin Easy Google Fonts.

Setelah Anda menginstal dan mengaktifkan plugin ini, buka penyesuai tema Anda di bawah menu Appearance > Customize. Anda akan melihat di bilah sisi kiri menu tarik-turun akordeon baru yang disebut Tipografi telah ditambahkan.

Klik untuk membuka ini dan kemudian Anda dapat menggunakan tombol 'Edit Font' untuk dengan cepat mengubah font situs web Anda, serta bobotnya masing-masing, apakah itu huruf besar, dll. dan banyak lagi. Anda juga dapat menggunakan properti CSS untuk lebih mengubah gaya dan posisi font pilihan Anda.

Selain itu, Anda bahkan dapat menambahkan kontrol font Anda sendiri. Untuk melakukan ini, buka halaman pengaturan plugin di bawah Pengaturan> Google Font.

Buat kontrol font baru dan tentukan pemilih CSS. Misalnya kita mengatur kelas .entry-title yang sesuai dengan judul posting dari tema kita. Kemudian, ketika mengunjungi penyesuai lagi, sebuah kotak baru akan tersedia dengan nama yang ditentukan bagi Anda untuk menerapkan penyesuaian font ke judul posting dengan cara yang sama seperti yang kami jelaskan di atas. Mudah!

Tambahkan Google Font Secara Manual

Jika Anda lebih suka tidak menggunakan plugin tetapi masih ingin memanfaatkan Google Font di situs WordPress Anda, maka tidak masalah. Ini dapat ditambahkan secara manual dengan relatif mudah. Mari kita lihat caranya. Tentu saja ada juga cara manual untuk menambahkan Google Font ke situs web Anda.

Langkah pertama:

Pertama, Anda harus mendapatkan tautan font dari situs font Google.

Katakanlah Anda ingin menggunakan keluarga font Roboto. Ketika Anda mengklik font ini, Anda akan dipindahkan ke halamannya di mana Anda dapat melihat teks apa pun untuk memastikan font tersebut cocok untuk Anda. Di sisi kanan Anda akan melihat kotak 'Gunakan di web' yang menyertakan tautan yang Anda perlukan untuk menambahkannya ke situs Anda.

Untuk mengantrekan Google Font di WordPress dengan benar, buka file functions.php tema Anda dengan editor favorit Anda dan masukkan kode berikut di bagian akhir:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Salin URL yang disediakan dalam teks Tautan Google (diawali dengan https://) dan kemudian ganti ini dengan kode di atas (dalam contoh kami saat ini https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Kemudian di file style.css tema Anda gunakan font dengan cara yang sama seperti yang Anda lakukan dengan font lain, mengikuti "aturan CSS untuk menentukan keluarga" yang disediakan oleh Google.

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

Sekarang di bagian depan situs Anda, Anda akan melihat font Roboto diterapkan ke area yang telah ditentukan dalam file CSS Anda.

Tambahkan Font Adobe

Alternatif yang bagus untuk Google Font adalah font dari Adobe Fonts. Plugin Custom Adobe Fonts membantu Anda menyematkan font-font ini dengan mudah di situs WordPress Anda dan saat ini berfungsi dengan Tema Astra, Tema Beaver Builder, Plugin Beaver Builder, dan Elementor Page Builder.

Untuk memulai, instal plugin, lalu buka perpustakaan font Adobe yang ekstensif untuk menemukan font yang cocok untuk Anda (Anda harus mendaftar untuk masuk).

Ada banyak cara untuk memfilter font dan sistemnya cukup intuitif untuk digunakan. Setelah Anda menemukan font yang Anda suka, klik dan lihat ke dekat kanan atas halaman di mana Anda akan melihatnya mengatakan 'Tambahkan ke proyek web'. Sebuah kotak seperti di bawah ini akan terbuka. Beri nama proyek web Anda dan pilih varian font yang ingin Anda sertakan di dalamnya.

Setelah Anda memberinya nama dan menekan tombol 'Buat', Anda akan dibawa ke layar berikutnya di mana kode embed HTML dan aturan CSS disediakan. Anda sekarang memiliki dua pilihan. Anda dapat a) terus menggunakan plugin Custom Adobe Fonts atau b) menyematkan font ini secara manual.

Menggunakan Plugin Font Adobe Kustom

Ini adalah cara termudah untuk menarik font Adobe Anda ke situs web Anda. Setelah Anda membuat proyek Anda, klik 'Proyek Web' dan temukan proyek Anda dalam daftar. Anda akan melihat di bagian atas bahwa ada kode 'Project ID' (seperti yang ditunjukkan di bawah). Sekarang, buka pengaturan Plugin Adobe Font dan Klik 'Font Typekit Kustom' dari menu. Masukkan ID Proyek ini ke dalam kotak ini dan simpan.

Anda sekarang akan melihat font ini terdaftar di WordPress Customizer, Elementor atau pembuat halaman lain yang kompatibel yang Anda gunakan. Pilih dan Anda siap melakukannya.

Menyematkan Font Kustom Secara Manual

Menyematkan font Adobe Anda secara manual dilakukan dengan cara yang persis sama seperti yang kami jelaskan untuk menyematkan font Google. Anda akan melihat tautan embed stylesheet yang disediakan oleh Adobe (ditampilkan di bawah) di ikhtisar Proyek Web. Untuk melihat kelas CSS, klik teks 'Edit Proyek' dan ini disediakan di samping setiap gaya font.

Cara Menemukan Font Kustom dan Memasangkannya

Anda juga dapat menemukan dan mengunduh font yang ideal untuk situs Anda dan memuatnya dari dalam folder situs web Anda karena ada banyak sumber di luar sana yang menyediakan font gratis atau premium dalam berbagai variasi.

Anda juga bisa mendapatkan bantuan dari alat online Font Pair yang sangat bagus untuk melihat pratinjau kombinasi font sehingga Anda dapat mencampur dan mencocokkan font sesuai keinginan Anda. Cara menyajikan pasangan font, juga mudah untuk menemukan saran pasangan lain dengan browsing.

Di blog kami, Anda juga dapat menemukan dua artikel bagus tentang pemasangan font. Ada Panduan untuk Memasangkan Font untuk Desainer Web + 30 Contoh Menakjubkan! jika Anda ingin mempelajari lebih lanjut tentang desain pasangan font dengan konsultasi hebat tentang apa yang harus Anda tekankan dan bagaimana mencapai keterbacaan dan nuansa terbaik. Detail lebih lanjut tentang alat pemasangan font dapat ditemukan di artikel 10 Alat Pemasangan Font Teratas untuk Desainer Web kami.

Muat Font Kustom dari Folder

Meskipun Google Fonts dan Adobe Fonts menawarkan pilihan yang luar biasa dari Anda untuk dipilih plus cara mudah menggunakannya di situs web Anda, itu bukan satu-satunya pilihan yang terbuka untuk Anda dalam pencarian Anda untuk font yang sempurna.

Ada beberapa situs web luar biasa yang menjual font khusus yang telah dibuat dengan cermat oleh para desainer. Font Squirrel misalnya menawarkan perpustakaan font yang besar dan yang paling penting, memungkinkan penggunaan komersial dan format yang mudah diterapkan untuk font ini. Ada campuran font gratis dan 'premium' di situs (yang harus dibayar).

Satu font bagus yang mungkin ingin Anda pertimbangkan dari Font Squirrel adalah Fira Sans. Mari kita gunakan ini sebagai contoh untuk mengetahui cara menginstalnya di situs WordPress kami untuk digunakan.

Pertama, klik tab 'Webfont Kit'. Centang 'kotak WOFF lalu klik 'Unduh kit @Font-Face'.

Anda akan mendapatkan file zip yang sekarang perlu diekstrak. Di folder ini Anda akan menemukan file font bersama dengan file stylesheet.css yang berisi kode yang Anda perlukan untuk stylesheet CSS Anda sendiri.

Untuk OpenSans-ExtraBold-webfont misalnya, kita harus menggunakan CSS berikut:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Taruhan terbaik Anda adalah menempatkan semua file font dari semua format di dalam direktori yang sesuai pilihan Anda di bawah folder tema Anda. Dalam contoh kita, itu berada di bawah folder /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

Di dalam folder yang sama buat file open-sans.css dan letakkan di dalam semua kode CSS dari setiap file stylesheet.css sehingga isinya terlihat seperti ini:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Ini juga membantu berbagai browser memilih font yang didukungnya. Jika Anda perlu mengantrekan file CSS font dengan cara WordPress, Anda harus melakukannya di functions.php seperti ini:

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

Jangan lupa untuk mengganti URL dengan path ke file open-sans.css Anda.

Kesimpulan

Memilih font yang tepat saat membangun situs web Anda memiliki dampak signifikan pada tampilan dan pengoperasian situs web Anda. Dengan begitu banyak font yang menakjubkan untuk dipilih, jangan merasa Anda harus tetap berpegang pada font yang disediakan oleh tema Anda. Semoga artikel ini menunjukkan kepada Anda bagaimana Anda dapat menggunakan hampir semua font yang sesuai untuk situs WordPress Anda!