Cara Menambahkan Font WordPress Kustom (Dan Memilih Font Yang Berpasangan)

Mencari cara untuk menambahkan font WordPress kustom Anda sendiri ke situs Anda?

Tema WordPress Anda mungkin hadir dengan kumpulan fontnya sendiri untuk Anda pilih, tetapi opsinya bisa sangat terbatas, jadi sangat dapat dimengerti bahwa Anda ingin menambahkan font WordPress Anda sendiri sebagai gantinya.

Dalam posting ini, Anda akan belajar cara mengunggah dan menggunakan font apa pun di WordPress melalui beberapa metode berbeda.

Jika Anda tidak terbiasa dengan ide menggunakan font WordPress Anda sendiri, kami akan mulai dengan panduan singkat tentang di mana menemukan font kustom dan cara memasangkannya.

Kemudian, kami akan menunjukkan cara menambahkan font WordPress kustom dari:

• Google Font
• Font Adobe (Typekit)
• Secara harfiah di tempat lain! (dengan mengunggah file font dan menggunakan CSS3 @font-face)

Klik tautan ini untuk langsung menuju ke tutorial.

Di mana Menemukan Font Kustom untuk WordPress

Tempat paling terkenal untuk menemukan font WordPress khusus adalah Google Font. Di Google Fonts, Anda akan menemukan repositori lebih dari 900 font, semuanya gratis dan sangat mudah untuk diintegrasikan ke situs WordPress Anda berkat CDN Google.

Setelah Google Fonts, opsi terkenal lainnya adalah Adobe Fonts ( sebelumnya disebut Typekit ). Adobe Fonts disertakan tanpa biaya tambahan sebagai bagian dari langganan Creative Cloud Adobe, tetapi tidak tersedia untuk non-pelanggan.

Terakhir, Anda dapat menemukan banyak situs lain yang menggabungkan font gratis dan premium. Dua favorit kami adalah:

• Font Squirrel – mengumpulkan font yang 100% gratis untuk penggunaan komersial.
• Fonts.com – memiliki banyak koleksi font premium.

Cara Memasangkan Font Agar Situs Anda Terlihat Luar Biasa

Biasanya, Anda tidak akan menggunakan satu font pun di situs WordPress Anda. Sebaliknya, sebagian besar situs menggunakan pasangan font untuk membuat desain yang lebih menarik dan membantu membedakan konten.

Namun, Anda tidak ingin hanya membuang dua font secara acak – yang mungkin tidak terlihat terlalu menarik.

Sebagai gantinya, Anda memerlukan dua font yang bekerja bersama yang, jika Anda bukan seorang desainer , mungkin sulit untuk diketahui.

Untuk membantu, ada banyak situs hebat yang akan menyarankan pasangan font untuk Anda. Misalnya, jika Anda menemukan satu font yang benar-benar Anda sukai , Anda dapat menggunakan salah satu situs ini untuk menemukan pasangannya. Beberapa favorit kami adalah:

• Pasangan Font
• Fontjoy
• ketik.io

Meskipun tidak ada aturan yang mengatakan bahwa Anda hanya dapat menggunakan dua font, Anda harus berhati-hati menggunakan terlalu banyak font WordPress. Di luar potensi untuk membuat desain yang kacau, menggunakan terlalu banyak font khusus juga dapat memperlambat waktu muat situs Anda.

Cara Menambahkan Font WordPress Kustom: Panduan Langkah-demi-Langkah

Sekarang untuk bagian yang menyenangkan – inilah cara untuk mulai menggunakan font WordPress kustom Anda sendiri.

Ada beberapa rute yang dapat Anda ambil di sini tergantung dari mana Anda ingin sumber font Anda.

Berikut adalah tiga metode yang akan kita bahas. Sekali lagi, Anda dapat mengeklik tautan untuk langsung menuju ke tutorial tertentu:

1. Tambahkan Google Font di WordPress (plugin, manual, atau metode hosting lokal)
2. Tambahkan Font Adobe (Typekit) di WordPress
3. Gunakan CSS3 @font-face untuk Mengunggah dan Menambahkan Font Apa Saja di WordPress

Cara Menambahkan Google Font ke WordPress

Karena Google Fonts adalah sumber paling populer untuk font WordPress kustom, kami akan membahas tiga cara berbeda untuk menambahkan Google Fonts ke WordPress:

1. Tambahkan Google Font dari CDN Google dengan plugin
2. Tambahkan Google Font secara manual dari CDN Google
3. Host Google Font secara lokal di WordPress dengan plugin

Cara Menambahkan Font Google di WordPress Menggunakan Plugin

Karena popularitas Google Font, Anda dapat menemukan beberapa plugin berkualitas yang membuatnya sangat mudah untuk menambahkan Google Font ke WordPress, dengan favorit kami adalah Easy Google Font karena:

• Bebas
• Ringan
• Mudah digunakan

Setelah Anda menginstal dan mengaktifkan plugin, buka Penampilan → Sesuaikan di dasbor WordPress Anda untuk meluncurkan Penyesuai WordPress waktu nyata.

Kemudian, klik opsi Tipografi untuk memilih opsi Font Google Anda:

Dari sana, Anda dapat menggunakan opsi untuk memilih font khusus untuk setiap elemen di situs Anda:

Misalnya, inilah tampilannya untuk mengubah font paragraf:

Selain memilih font itu sendiri, plugin juga memungkinkan Anda menyesuaikan:

• Berat font
• Dekorasi teks
• warna

Jika Anda tahu sedikit tentang CSS, Anda juga dapat menggunakan fitur Kontrol Font plugin untuk mengelompokkan elemen tertentu. Misalnya, Anda dapat menggabungkan pemilih tajuk untuk menargetkan semua tajuk sekaligus.

Untuk mengatur ini, buka Pengaturan → Google Font dan buat Kontrol Font baru untuk menargetkan pemilih CSS tertentu:

Cara Menambahkan Font Google di WordPress Tanpa Plugin

Karena Google menghosting semua fontnya di CDN-nya sendiri, menambahkan Google Font ke WordPress juga cukup mudah.

Pada dasarnya, daripada perlu mengunggah file font ke server Anda, Anda cukup menautkan ke CDN yang dihosting Google dan Google akan menangani penyajian font untuk Anda.

Beberapa orang tidak suka melakukan ini karena alasan kinerja – Saya akan membagikan cara menghosting Google Font secara lokal di bagian berikutnya, jika Anda mau .

Untuk memulai, Anda perlu menggunakan situs web Google Font untuk memilih font yang ingin Anda tambahkan.

Untuk contoh ini, katakanlah Anda ingin menggunakan Roboto .

Buka halaman font dan klik + Pilih Font Ini :

Ini akan menambahkan jendela di sudut kanan bawah. Klik untuk memperluas jendela itu.

Jika Anda ingin memilih bobot font tambahan ( misalnya untuk bold dan italic ), Anda bisa pergi ke tab Customize . Untuk keseimbangan yang baik antara kegunaan dan kinerja, kami sarankan untuk memilih tiga bobot font dengan jumlah maksimum mutlak :

• Reguler
• miring
• Berani

Anda bahkan dapat menggunakan lebih sedikit jika Anda menginginkan kinerja terbaik .

Setelah Anda menentukan pilihan, kembali ke tab Embed dan salin kode Embed Font :

Selanjutnya, Anda perlu menambahkan kode ini ke bagian <head> dari tema WordPress Anda. Anda dapat melakukannya dengan:

• Langsung mengedit file header.php dari tema anak Anda ( pastikan Anda menggunakan tema anak – jika tidak, font kustom Anda akan hilang saat Anda memperbarui tema Anda )
• Menggunakan plugin gratis seperti Sisipkan Header dan Footer

Setelah Anda menambahkan kode, Anda dapat mulai menggunakan Google Font di CSS Anda.

Jika Anda kembali ke situs web Google Fonts, Google sebenarnya akan memberi tahu Anda aturan CSS yang perlu Anda gunakan:

Misalnya, agar tag h2 Anda menggunakan font Roboto baru Anda, Anda dapat membuka Penampilan → Kustomisasi → CSS tambahan dan tambahkan cuplikan berikut:

h2 {

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

}

Cara Meng-host Google Font Secara Lokal di WordPress Dengan Plugin

Inilah metode terakhir untuk Google Font!

Beberapa orang lebih suka meng-host Google Font secara lokal, daripada memuatnya dari CDN Google. Artinya, daripada memuatnya dari tautan seperti “https://fonts.googleapis.com/css?family=Roboto:400.700”, Anda dapat meng-host file di server Anda sendiri.

Cara termudah untuk melakukannya adalah dengan plugin gratis bernama CAOS for Webfonts.

Setelah Anda menginstal dan mengaktifkan plugin, Anda dapat pergi ke Pengaturan → Optimalkan Webfonts untuk memilih font mana yang ingin Anda unduh ke server Anda:

Setelah Anda selesai melakukannya, Anda dapat mulai menggunakan font di CSS Anda ( seperti jika Anda mengikuti metode sebelumnya ).

Cara Menambahkan Font Adobe (Typekit) di WordPress

Jika Anda ingin menggunakan Adobe Fonts di WordPress, pada dasarnya Anda dapat mengikuti langkah-langkah yang sama seperti metode manual Google Fonts. Ingat, layanan Adobe Fonts hanya tersedia sebagai bagian dari langganan Creative Cloud .

Untuk memulai, Anda harus menggunakan situs web Adobe Fonts untuk memilih font Anda dan membuat proyek web ( petunjuk terperinci di sini ).

Di jendela Tambahkan font ke Proyek Web , Anda dapat memilih font mana yang akan disertakan:

Kemudian, Adobe akan memberi Anda kode sematan, seperti Google Font:

Ambil kode semat itu dan tambahkan ke situs Anda menggunakan file header.php tema anak Anda atau plugin seperti Sisipkan Header dan Footer.

Setelah Anda menautkan ke file CSS, Anda dapat menggunakan CSS yang disediakan Adobe untuk mulai menerapkan font ke pemilih CSS di situs Anda:

Cara Menggunakan @font-face di WordPress

Terakhir, metode terakhir yang akan kami tunjukkan adalah cara menggunakan @font-face di WordPress. Hal yang menyenangkan tentang metode ini adalah ia akan bekerja dengan file font apa pun dari sumber mana pun .

Pada dasarnya, selama Anda dapat mengunduh file font dan memiliki hak untuk menggunakannya, CSS3 @font-face akan menyelesaikannya.

Untuk memulai, unduh file font dari sumber pilihan Anda. Untuk contoh ini, kita akan menggunakan font gratis dari Font Squirrel bernama Alex Brush .

Jika memungkinkan, cobalah untuk men-download file dalam .woff atau berkas .woff2 format untuk kompatibilitas cross-browser terbaik. Jika itu tidak memungkinkan, Anda dapat mengunduh font Anda dalam format yang berbeda dan kemudian menggunakan alat FontSquirrel Webfont Generator gratis untuk mengubahnya menjadi .woff :

Selanjutnya, sambungkan ke server situs WordPress Anda melalui FTP atau cPanel File Manager. Kemudian…

• Buat folder baru bernama fonts di dalam direktori tema aktif atau tema anak Anda ( beberapa tema mungkin sudah memiliki folder font . Jika demikian, Anda dapat melewati ini ).
• Unggah file font ke folder font . Anda dapat mengunggah format .woff dan .woff2

Setelah Anda mengunggah file, buka Penampilan → Kustomisasi → CSS Tambahan di dasbor WordPress Anda.

Pertama, Anda perlu menggunakan @font-face untuk menambahkan font Anda…

Untuk melakukannya, masukkan nama font Anda sebagai font-family dan tambahkan URL langsung ke file font di server Anda sebagai URL . Inilah yang terlihat seperti contoh AlexBrush kami:

@font-wajah {

font-family: AlexBrush;

src: url(http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

font-berat: normal;

}

Setelah Anda selesai melakukannya, Anda dapat menggunakan CSS untuk menerapkan keluarga font Anda ( dengan nama yang Anda daftarkan dengan @font-face ). Sebagai contoh, berikut tampilan penggunaan font AlexBrush untuk header <h2>:

Dan itu saja! Anda dapat menggunakan metode CSS3 @font-face ini untuk file font apa pun.

Pemikiran Terakhir tentang Font WordPress Kustom

Jika tema WordPress Anda tidak memiliki font yang ingin Anda gunakan, jangan panik! Anda memiliki banyak opsi untuk menambahkan font WordPress kustom Anda sendiri.

Cara termudah untuk memulai adalah dengan font gratis yang dihosting di Google Fonts atau opsi premium yang dihosting di Adobe Fonts.

Namun, Anda tidak terbatas pada layanan tersebut, dan dengan menggunakan CSS3 @font-face, Anda dapat mengunggah file font apa pun ke WordPress dan mulai menggunakannya di tema Anda.

Sekarang keluarlah dan buat pasangan font Anda sendiri!