Cara Menambahkan Font Kustom ke Situs WordPress Anda (3 Metode)

Tipografi lebih penting daripada kebanyakan orang memberikannya kredit. Fon yang Anda gunakan tidak hanya memengaruhi presentasi situs web Anda, mereka juga dapat membuatnya menonjol dari situs lain dan membuat konten Anda lebih mudah dibaca. Memilih font yang sama dengan orang lain mungkin merupakan taruhan yang aman, tetapi dapat bermanfaat saat Anda menambahkan font khusus ke WordPress.

Meskipun WordPress menyertakan beragam opsi font yang layak, ada banyak cara untuk meningkatkan pilihan itu. Jika Anda tahu cara memasukkan font khusus di situs web Anda, Anda dapat memilih dari ribuan opsi menarik. Ini akan memungkinkan Anda menemukan font yang sesuai dengan niche dan audiens Anda.

Memahami apa itu font khusus (dan mengapa Anda mungkin ingin menggunakannya)

Istilah font font khusus ’cukup luas. Karena kita berbicara tentang WordPress, bagaimanapun, kita akan menggunakannya untuk merujuk pada jenis huruf apa pun sistem manajemen konten (CMS) tidak termasuk di luar kotak. Ada ribuan opsi font khusus yang dapat Anda temukan online, dan secara umum, tidak ada yang menghentikan Anda untuk menggunakannya.

Perlu diingat, meskipun – font yang Anda pilih tidak hanya menyenangkan secara estetika. Mereka juga harus memenuhi beberapa kriteria tambahan:

Selain dari pertimbangan teknis ini, font memberi Anda cara tambahan untuk mengekspresikan gaya situs Anda. Mereka dapat menjadi bagian dari branding Anda, dan seiring waktu pengguna mungkin akan mengaitkannya dengan situs dan bisnis Anda. Jadi, Anda ingin mempertimbangkan pilihan Anda dengan sangat hati-hati.

Di mana Anda dapat menemukan font khusus untuk situs WordPress Anda

Jika Anda melakukan pencarian cepat untuk 'font gratis' menggunakan mesin pencari apa pun sekarang, Anda akan menemukan ratusan halaman dengan pilihan luas untuk dipilih:

Masalahnya, bagaimanapun, adalah bahwa banyak dari situs web 'font bebas' itu cenderung tidak memiliki standar yang tinggi dalam hal menentukan pilihan mereka. Anda mungkin dapat menemukan beberapa permata, tetapi dalam banyak kasus, mereka juga akan penuh dengan font Anda tidak akan tertangkap mati menggunakan bahkan jika Anda sedang bekerja pada profil MySpace 2005.

Untungnya, ada banyak repositori font yang sangat baik yang berusaha keras untuk menyusun koleksi mereka. Salah satu favorit kami adalah Google Fonts, yang menawarkan lebih dari 900 keluarga font dalam beberapa bahasa, semuanya gratis:

Pilihan luar biasa lainnya adalah Adobe Font (sebelumnya Typekit), yang menyediakan lebih dari 1.700 kelompok font untuk dipilih. Namun perlu diingat – untuk mengaksesnya, Anda memerlukan a Awan kreatif berlangganan (semua tingkatan akan melakukan). Jika Anda pengguna Adobe, itu artinya Anda sudah memiliki akses ke seluruh koleksi font:

Kedua sumber ini sendiri akan memberi Anda banyak pilihan untuk dipilih. Ingatlah ketika membuat pilihan Anda bahwa setiap font yang Anda pilih harus sesuai dengan gaya situs Anda, dan mudah dibaca. Setelah Anda menemukan beberapa font yang Anda suka, yang tersisa adalah menambahkannya ke situs web Anda.

Bagaimana cara menambahkan font khusus ke situs WordPress Anda (tiga metode)

Ketika datang ke font khusus, WordPress memberi Anda beberapa cara untuk menerapkan opsi yang Anda inginkan. Mari kita bahas apa yang masing-masing terlibat, sehingga Anda dapat memilih metode yang paling cocok untuk Anda.

1. Edit file tema Anda

Jika Anda tidak ingin mengunggah file font ke situs web Anda secara manual, Anda selalu dapat 'mengimpor' mereka dari repositori pihak ketiga. Dengan Google Fonts, misalnya, Anda dapat membuka halaman font apa saja yang Anda inginkan dan mengklik Pilih Font Ini di bagian atas layar:

Setelah Anda melakukannya, akan muncul menu baru yang mencakup dua cuplikan kode. Yang pertama akan terlihat seperti ini:

Kode ini harus ditempatkan di dalam tag tema anak Anda header.php mengajukan. Anda dapat menemukan ini di dalam folder tema Anda di public_html / wp-content / themes direktori.

Dengan kalimat itu, Anda memberi tahu WordPress untuk mengimpor opsi yang Anda pilih dari Google Fonts. Untuk menggunakannya, Anda juga harus membuka stylesheet tema anak Anda dan menentukan elemen mana yang harus memanfaatkan font baru Anda. Akan terlihat seperti apa kode itu:

font-family: 'Roboto', sans-serif;

Ingat, stylesheet tema anak Anda harus berada dalam direktori yang sama header.php mengajukan. Itu berarti Anda dapat menangani kedua tugas di tempat yang sama, dan mengimplementasikan font baru hanya dalam beberapa menit.

2. Unggah file font Anda ke folder tema Anda

Jika Anda semua tentang optimasi kinerja, mengunggah file font ke situs web Anda secara langsung dapat memungkinkan Anda mencukur beberapa milidetik dari waktu pemuatan Anda. Hal pertama yang Anda butuhkan, tentu saja, adalah file font yang ingin Anda unggah ke server Anda:

Karena WordPress tidak termasuk yang berdedikasi font folder, Anda ingin membuatnya menggunakan klien FTP terpercaya Anda. Anda dapat menambahkan folder di mana pun Anda inginkan, tetapi kami sarankan untuk menempatkannya di dalam folder Anda tema direktori sehingga Anda dapat melacaknya. Setel sekarang, dan unggah file font Anda ke folder baru:

Setelah file di tempat, buka stylesheet tema anak Anda. Sekarang Anda harus memanggil font itu sehingga Anda dapat menggunakannya, melalui cuplikan yang akan terlihat seperti ini:

@font-face { font-family: New Font; src: url(https://www.yourwebsite.com/wp-content/themes//fonts/your-new-font.ttf); font-weight: normal; }

Harap perhatikan nama keluarga font dan URL di atas adalah placeholder, yang perlu Anda ganti dengan informasi yang benar.

Setelah Anda memasukkan kode ini, jangan tutup stylesheet tema Anda dulu. Anda masih perlu mengonfigurasi elemen mana yang akan menggunakan font baru, dengan beberapa kode yang sangat mirip dengan apa yang kami lihat di bagian terakhir:

.h1 site-title { font-family: "New Font", Arial, sans-serif; }

Dalam contoh ini, kami mengonfigurasi subtitle H1 kami untuk menggunakan font baru. Namun Anda dapat menggantinya dengan elemen lain yang Anda inginkan, atau beberapa elemen jika Anda ingin menggunakan font di lebih dari satu tempat.

3. Gunakan plugin

Seperti yang sering terjadi, cara termudah untuk mengimplementasikan fungsionalitas baru di WordPress adalah menginstal plugin. Ketika datang untuk menggunakan font khusus, ada banyak opsi untuk dipilih.

Misalnya, jika Anda ingin menggunakan Google Fonts, kami sarankan pengaya Google Fonts untuk WordPress. Setelah mengaktifkan alat ini, Anda dapat memilih dari seluruh katalog Google Font untuk halaman dan posting Anda, tanpa perlu menambahkan kode apa pun ke situs web Anda:

Di sisi lain, jika Anda ingin menggunakan file font apa pun dan tidak membatasi diri Anda pada satu repositori, Font Kustom adalah alat yang harus Anda perhatikan:

Dengan plugin ini, Anda dapat mengunggah font ke situs web Anda langsung dari dasbor, dan menggunakan Customizer untuk memilih di mana dan kapan menggunakannya. Salah satu dari plugin ini memudahkan untuk menambahkan font khusus baru ke situs Anda.

Kesimpulan

Jika Anda memperhatikan font yang digunakan situs web, Anda akan melihat bahwa banyak dari mereka tetap menggunakan beberapa pilihan coba-dan-benar yang sama. Beberapa font merupakan taruhan yang cukup aman untuk pembacaan dan aksesibilitas pengguna. Namun, dengan ribuan opsi untuk dipilih – baik gratis maupun berbayar – ada baiknya mencari yang juga cocok dengan gaya dan audiens situs web Anda dengan sempurna.

Adapun cara mengunggah font khusus ke WordPress, Anda dapat melakukannya menggunakan tiga pendekatan berbeda:

Apakah Anda memiliki pertanyaan tentang jenis font apa yang harus Anda gunakan di situs web Anda? Mari kita bicarakan di bagian komentar di bawah!