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

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

Tema WordPress Anda mungkin hadir dengan beberapa font untuk Anda pilih, tetapi opsinya bisa sangat terbatas. Jadi dapat dimengerti bahwa Anda ingin menambahkan font baru atau font yang berbeda.

Dalam posting ini, Anda akan belajar cara mengunggah dan menggunakan font apa pun yang dipilih 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, apakah ini font Google, font Adobe (sebelumnya disebut font Typekit) atau yang lainnya.

Klik tautan ini untuk langsung menuju ke tutorial.

Temukan cara mempublikasikan dalam hitungan detik, bukan jam

Daftar sekarang untuk mendapatkan akses eksklusif ke Wordable, bersama dengan dan cari tahu cara mengunggah, memformat, dan mengoptimalkan konten dalam hitungan detik, bukan jam.

Mulai penerbitan

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.

Opsi terkenal lainnya adalah Adobe Fonts.

Adobe Typekit Web Fonts menawarkan ribuan font cantik yang dapat dengan cepat ditambahkan ke salah satu proyek web Anda.

Ini termasuk 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 beberapa font secara gratis dan dengan harga 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 yang cocok 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 dalam menggunakan banyak font. Di luar potensi untuk membuat desain yang kacau, menggunakan terlalu banyak font 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 kustom Anda sendiri di WordPress.

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:

• Tambahkan Google Font di WordPress (plugin, manual, atau metode hosting lokal)
• Tambahkan Font Adobe (Typekit) di WordPress
• 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:

• Tambahkan Google Font dari CDN Google dengan plugin
• Tambahkan Google Font secara manual dari CDN Google
• 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 font, 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 huruf

Jika Anda mengetahui sedikit kode 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 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 pemilihan font, 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 kode 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, coba unduh file dalam format file .woff atau .woff2 untuk kompatibilitas lintas-browser terbaik. Jika itu tidak memungkinkan, Anda dapat mengunduh font Anda dalam format yang berbeda dan kemudian menggunakan alat FontSquirrel Webfont Generator gratis untuk mengonversinya menjadi .woff:

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

• Buat folder baru bernama font di dalam tema aktif atau direktori 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 keluarga font 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!