3 Cara Berbeda untuk Menambahkan Font Kustom ke Tema Situs WordPress Anda

Ada banyak cara menarik dan dapat disesuaikan untuk membuat situs web WordPress Anda terlihat lebih unik dan menarik secara visual. Salah satu caranya adalah dengan menambahkan font khusus ke situs WordPress Anda. Lihatlah beberapa situs pesaing Anda. Mereka mungkin meniru nada dan gaya yang sama yang juga ingin Anda buat dengan situs web WordPress Anda sendiri. Perhatikan penggunaan font mereka. Banyak situs sukses cenderung menggunakan beberapa font yang dipilih dengan cermat yang digunakan secara konsisten di seluruh situs web.

Ada begitu banyak font khusus yang tersedia online secara gratis yang dapat Anda tambahkan dengan mudah ke situs Anda sendiri. Setelah menemukan font yang tepat, Anda perlu mengetahui cara menerapkannya ke situs web Anda. Ada berbagai metode yang dapat Anda coba untuk mencapai ini.

Hal pertama yang pertama, temukan font yang tepat; ada banyak situs di luar sana yang menawarkan ribuan font gratis untuk Anda unduh. Coba Google Fonts, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 Font Gratis, Fonts.com.

Singkatnya, ada dua cara utama untuk menambahkan font khusus ke situs web WordPress Anda: secara manual, atau dengan plugin.

Tambahkan Font Kustom Secara Manual ke Tema Situs WordPress Anda

Menambahkan font khusus ke WordPress Anda secara manual dapat bermanfaat jika Anda tidak ingin mengambil risiko membebani situs WordPress Anda dengan terlalu banyak plugin. Ini dapat dicapai melalui pengeditan direktif @font-face. Ini memungkinkan Anda untuk menghubungkan banyak font dalam format apa pun ke situs Anda.

Ini melibatkan langkah-langkah berikut:

Langkah 1

Pertama, unduh font khusus pilihan Anda dari situs web mana pun yang menurut Anda paling berguna. Setelah file disimpan ke komputer Anda, ekstrak arsip .zip ini.

Langkah 2

Setelah ini, Anda kemudian dapat mengunggah file font ini di server hosting WordPress Anda di bawah direktori “wp-content/themes/your-theme-folder/fonts”. Jika Anda belum menyiapkan folder khusus untuk font khusus Anda, buat folder dan simpan di sana.

Langkah 3

Selanjutnya, pergilah ke area admin WordPress. Pilih Penampilan, lalu buka Editor Tema. Pada titik ini, Anda akan melihat file style.css tema di layar Anda. Di bawah ini, Anda perlu menambahkan bagian kode ini:

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

Ingatlah untuk mengganti "URL" dan "font-family" dalam kode dengan nilai yang sesuai dengan font yang Anda pilih. Anda juga harus menempelkan bagian kode ini di awal file CSS tetapi setelah komentar tema.

Langkah 4

Terakhir, pastikan Anda mengklik tombol Perbarui File yang penting itu. Ini memastikan bahwa perubahan Anda disimpan dengan benar sebelum Anda meninggalkan halaman.

Langkah 5

Setelah ini, Anda dapat dengan mudah menggunakan font di mana pun Anda ingin menerapkannya di stylesheet tema Anda. Menggunakan kode berikut:

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Sekarang setelah Anda mengedit kode font-face ini, setiap kali seseorang membuka situs web Anda, font akan dimuat. Tapi Anda belum menerapkannya ke elemen tertentu di halaman. Untuk melakukan ini, Anda perlu melakukan satu pengeditan terakhir pada file style.css yang sesuai yang baru saja Anda akses. Anda perlu memasukkan kode seperti berikut ke dalam file:

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Direkomendasikan untuk Anda: Panduan Pemula: Bagaimana Cara Memasang Tema WordPress?

Catatan Cepat:

Ingat, seperti sebelumnya, untuk mengedit nilai font-family agar sesuai dengan font yang Anda gunakan.

Jika, misalnya, Anda menggunakan tipografi khusus dari Google Fonts, Anda akan melihat bahwa ada tab bernama @import, yang memberi Anda kode yang relevan untuk disalin dan ditempelkan ke file style.css tema Anda. Ini dapat membuat keseluruhan proses menjadi lebih sederhana jika Anda tidak nyaman berurusan dengan terlalu banyak pengkodean.

Namun, ini bukan metode yang sangat direkomendasikan lagi. Itu telah mengalami beberapa masalah kinerja, mencegah browser mengunduh beberapa lembar gaya secara bersamaan. Ini menghasilkan halaman pemuatan yang lebih lambat pada akhirnya. Jadi ingatlah ini ketika Anda memilih font dan metode untuk menggunakannya.

Di sisi lain, penginstalan font kustom manual melalui CSS memungkinkan Anda menghubungkan font dari berbagai format, termasuk SVG, WOFF, TTF, dan OTF. Cara ini juga memungkinkan Anda bekerja tanpa harus bergantung pada layanan pihak ketiga. File font Anda akan ditempatkan di server Anda. Ini adalah cara paling langsung untuk menambahkan font khusus ke WordPress.

Gunakan Plugin untuk Menambahkan Font Kustom ke Tema Situs WordPress Anda

Banyak orang memilih untuk menggunakan plugin untuk memasukkan font khusus mereka ke situs WordPress mereka, karena dalam banyak hal ini bisa menjadi metode paling sederhana untuk melakukannya. Ini terutama benar jika Anda tidak ingin berurusan dengan pengkodean CSS. Google Fonts adalah pilihan yang populer, terutama karena dapat dengan mudah digunakan bersamaan dengan plugin WordPress. Dua opsi terbaik untuk Anda adalah Easy Google Fonts & Google Fonts Typography. Setelah Anda mengaktifkan salah satu dari plugin ini, Anda akan dengan mudah dapat mengakses seluruh katalog font Google Fonts untuk ditambahkan ke halaman Anda tanpa harus berurusan dengan kode yang rumit.

Menggunakan Google Fonts adalah cara paling sederhana untuk melakukan ini dan Anda dapat melihat pratinjau perubahan dan font khusus secara waktu nyata di layar.

Bergantung pada file font mana yang ingin Anda gunakan dan apakah Anda bermaksud menggunakan satu repositori atau tidak, Anda mungkin ingin mempertimbangkan untuk menggunakan plugin alternatif, seperti plugin Custom Fonts.

Langkah 1

Setelah Anda menginstal plugin pilihan Anda, dan mengaktifkannya, buka Penampilan, lalu klik ke halaman Customizer, yang akan membuka halaman antarmuka penyesuai tema WordPress langsung. Di sinilah Anda akan melihat tab Tipografi, yang akan menunjukkan kepada Anda setiap bagian dari situs Anda sendiri tempat Anda dapat menerapkan font kustom Anda sendiri.

Langkah 2

Setelah Anda membuka halaman ini, Anda dapat mengklik tombol Edit Font di bagian halaman yang ingin Anda mulai edit. Kemudian Anda dapat mengerjakan berbagai sub-bagian, memilih gaya font, ukuran, margin, dll. – bagian ini akan bervariasi tergantung pada tema yang Anda gunakan.

Tema Anda juga bisa berarti Anda tidak akan dapat langsung mengedit pemilihan font untuk berbagai bagian situs web Anda. Namun, ada perbaikan sederhana untuk masalah ini: cukup buka Pengaturan, lalu Google Font, tempat Anda dapat membuat kontrol font sendiri. Untuk melakukannya, cukup masukkan Nama Kontrol ke dalam kotak dan pilih pemilih CSS. Ini memungkinkan Anda untuk menambahkan elemen HTML apa pun yang ingin Anda targetkan untuk font ini. Setelah Anda memasukkan informasi ini, pastikan untuk menyimpan perubahan Anda dengan mengklik tombol Save Font Control sehingga pengaturan Anda diperbarui sepenuhnya. Anda kemudian dapat terus membuat kontrol font khusus sebanyak yang Anda perlukan untuk setiap bagian berbeda dari situs web WordPress Anda.

Langkah 3

Untuk menggunakan pengontrol font baru ini setelah Anda membuatnya, cukup kembali ke bagian Penampilan, klik Penyesuai, lalu klik tab Tipografi. Setelah ini, Anda akan melihat opsi berlabel Tipografi Tema – ketika Anda mengklik ini, Anda akan dapat mengakses kontrol font khusus Anda hanya dengan memilih tombol Edit sehingga Anda dapat memilih font yang Anda inginkan dan tampilan yang Anda inginkan untuk ini. kontrol. Sekali lagi, jangan lupa untuk menyimpan perubahan Anda, dengan mengklik tombol Terbitkan atau Simpan untuk memperbarui situs Anda.

Catatan Cepat:

Beberapa plugin font WordPress kustom hebat lainnya yang kami rekomendasikan adalah Pengunggah Font Kustom dan Gunakan Font Apa Saja – tetapi ada banyak lagi yang bisa dipilih, jadi jelajahi opsi Anda sebelum menentukan yang ingin Anda gunakan.

Anda mungkin juga menyukai: 20 Tema WordPress Micro Niche Terlaris.

Terakhir, Coba Gunakan Tema

Selain dua metode utama untuk menambahkan font & tipografi khusus ke situs web WordPress Anda, Anda juga dapat menggunakan tema yang dapat Anda pilih. Ada banyak tema yang tersedia, banyak di antaranya dilengkapi dengan opsi bawaan yang memungkinkan Anda menyesuaikan font yang terpasang. Proses melakukannya akan bervariasi tergantung pada tema yang Anda gunakan. Jadi pastikan untuk mencari panduan yang sesuai untuk mencocokkan tema Anda. Tema WordPress premium berkualitas tinggi juga akan menawarkan dokumen yang tersedia untuk akses online yang memberikan panduan untuk menambahkan font khusus ke tema tertentu.

Elemen visual dan desain bisa dibilang menjadi salah satu faktor terpenting dalam membuat website efektif yang akan menarik perhatian setiap orang yang mengunjunginya. Salah satu fitur terbesar dalam bidang ini adalah penggunaan font. Apa pun cara yang Anda pilih untuk menambahkan font khusus ke situs web WordPress Anda, Anda harus menemukan dan menggunakan font yang paling sesuai untuk gaya, audiens, konten, tema, dan nada seluruh situs web dan merek Anda.

 Artikel ini ditulis oleh Beatrice Beard. Beatrice adalah copywriter profesional di Academic Brits, yang berspesialisasi dalam berbagai topik dan bidang studi yang mengesankan. Beatrice selalu terbuka untuk berbagi pengalaman pribadinya dan memberikan nasihat ahli kepada penulis pemula untuk mengungkap semua tantangan dan keanehan dalam membuat konten berkualitas tinggi yang benar-benar menjual.