Cara Menambahkan Font Kustom ke WordPress

Jika Anda ingin situs web Anda benar-benar menonjol, maka menggunakan font khusus akan membantu Anda mencapainya. Ada ribuan font khusus yang indah untuk dipilih, dan dengan memilih yang tepat untuk proyek Anda, Anda akan dapat membuat situs web yang tidak hanya unik tetapi juga mencerminkan gaya dan merek Anda. Jadi bagaimana Anda menambahkan font khusus ke WordPress?

Pada artikel ini, kami akan membahas semua yang perlu Anda ketahui tentang menerapkan font khusus ke situs web Anda. Ini termasuk:

• Di mana menemukan font khusus
• Bagaimana cara menambahkan Google Font ke situs web Anda menggunakan plugin Easy Google Fonts
• Menambahkan Google Font ke situs web Anda secara manual (tidak perlu plugin)
• Menambahkan Font Adobe ke WordPress
• Cara Menambahkan Font Kustom ke Ruang Web Anda

Siap untuk memulai?

Di Mana Anda Dapat Menemukan Font Kustom?

Saat ini, banyak tema WordPress premium dikirimkan dengan banyak font khusus. Namun, ini sering kali dapat meningkatkan tema mengasapi, dan memengaruhi waktu muat situs web Anda lebih dari yang Anda kira. Anda juga akan menemukan bahwa Anda sebenarnya hanya menggunakan beberapa font kustom paling banyak, sehingga sebagian besar font yang disediakan tema Anda tidak akan pernah diperlukan.

Oleh karena itu, kami sarankan untuk memilih tema WordPress yang ringan, yang kemudian dapat Anda tambahkan font khusus jika diperlukan. Ada sejumlah tempat di mana Anda dapat menemukan font khusus yang tepat untuk situs web Anda. Mari lihat…

• Google Fonts – Pilihan paling populer, Google Fonts, menawarkan direktori gratis lebih dari 900 font desainer open source yang dapat digunakan dalam lebih dari 135 bahasa. Font-font ini dapat dengan cepat dijelajahi dan kemudian diintegrasikan dengan mulus ke dalam proyek desain web apa pun.
• Adobe Fonts (Sebelumnya dikenal sebagai Typekit) – Meskipun Typekit menawarkan versi gratis dan premium dari layanannya, sekarang berganti nama menjadi Adobe Fonts, Anda harus mendaftar ke paket Adobe Creative Cloud berbayar untuk mengakses sumber daya ini. Ada ribuan font untuk dipilih, semua font dilisensikan untuk penggunaan pribadi dan komersial, dan Anda juga dapat memilih dari paket font bertema proyek, yang sempurna bagi mereka yang tidak menyukai desain.
• Font Squirrel – Di perpustakaan Font Squirrel Anda akan menemukan campuran font gratis dan premium, yang terakhir dapat dibeli sebagai pembelian satu kali. Sekali lagi, Anda dapat memilih dari ribuan font berkualitas tinggi, sebagian besar gratis dan berlisensi komersial.
• Fonts.com – Menyediakan lebih dari 150.000 produk font desktop dan web, Fonts.com berisi koleksi font kustom premium yang mengesankan. Anda juga akan menemukan bermacam-macam artikel menarik di blog Font.com, berbagi tip dan teknik tipografi.
• FontPair – Menawarkan pengalaman yang sedikit berbeda dengan sumber daya lainnya, FontPair memasangkan font bersama dari Google Font, membantu Anda menemukan kombinasi font yang tepat untuk situs web Anda.

Jadi, sekarang Anda tahu di mana menemukan font khusus. Selanjutnya mari kita lihat cara menambahkan Google Font ke situs WordPress Anda.

Cara Menambahkan Google Font ke WordPress Menggunakan Plugin Mudah Google Font

Karena Google Font adalah sumber paling populer untuk font khusus, kami akan mulai dengan melihat cara menambahkan font dari perpustakaan ini ke situs web Anda. Ada beberapa cara untuk melakukan ini, tetapi opsi tercepat dan termudah adalah menggunakan plugin WordPress Easy Google Fonts.

Easy Google Fonts adalah plugin WordPress gratis yang memungkinkan Anda memasukkan font khusus ke situs WordPress Anda, tanpa harus menyentuh sebaris kode pun. Terintegrasi dengan penyesuai WordPress, plugin ini akan memungkinkan Anda untuk memasukkan dan menggunakan font Google di front-end situs web Anda secara real-time, tanpa harus me-refresh halaman.

Jadi sekarang mari kita cari tahu cara menginstal dan menggunakan plugin ini.

Langkah 1: Instal Font Google Mudah

Untuk memulai dengan Easy Google Fonts, buka dashboard WordPress Anda dan pilih Plugins > Add New dari menu.

Kemudian ketik Easy Google Fonts ke dalam fungsi pencarian, dan setelah plugin diambil, klik Install > Activate .

Anda sekarang akan menemukan Font Google Mudah di bawah Pengaturan di menu WordPress Anda.

Langkah 2: Edit Font di Penyesuai WordPress

Setelah Anda menginstal Easy Google Fonts, dari menu WordPress Anda pilih Appearance > Customize . Situs web Anda sekarang akan terbuka di front-end, di mana Anda akan menemukan bagian Tipografi telah ditambahkan ke penyesuai.

Klik pada Tipografi. Anda kemudian dapat memilih area yang berbeda dari situs web Anda di mana Anda ingin menerapkan Google Font kustom (misalnya paragraf, Header 2, Header 3, dll).

Di bawah bagian yang ingin Anda edit, klik Edit Font . Anda kemudian dapat memilih font yang ingin Anda gunakan - Anda akan dapat melihat pratinjau bagaimana setiap font terlihat langsung di situs web Anda.

Anda tidak hanya dapat mengubah jenis font, tetapi Anda juga dapat mengubah warna, ukuran, posisi, dan banyak lagi. Setelah Anda puas dengan font baru Anda, klik Terbitkan .

Langkah 3: Buat Kontrol Font Kustom

Kontrol default Google Fonts yang mudah akan memungkinkan Anda untuk mengubah font bagian paragraf dan header 1-6. Namun, tidak semua elemen tema Anda dapat dikelola oleh kontrol font default.

Jika Anda ingin mengubah elemen berbeda dari tema Anda (selain paragraf atau header), maka Anda perlu membuat kontrol font kustom Anda sendiri. Meskipun Kontrol Font Mudah memungkinkan Anda melakukan ini dengan mudah, Anda masih memerlukan pemahaman dasar tentang pemilih CSS.

Untuk menambahkan kontrol font khusus, pilih Pengaturan > Google Font dari dasbor WordPress Anda. Kemudian, di tab Edit Kontrol Font , beri nama yang sesuai untuk grup kontrol font baru Anda, lalu pilih Buat Kontrol Font . Di sini kita akan membuat kontrol font untuk blockquotes…

Di bawah Add CSS Selectors , tambahkan pemilih CSS untuk elemen yang ingin Anda kelola. Anda dapat menambahkan lebih dari satu elemen jika diinginkan. Kemudian pilih Simpan Kontrol Font .

Kembali ke Customizer di bagian depan situs web Anda, di bawah Tipografi , Anda sekarang akan menemukan opsi Tipografi Tema, di mana Anda dapat mengakses kontrol kustom baru Anda.

Anda sekarang dapat memilih font kustom baru untuk elemen kustom tertentu dan mengubah pengaturan Penampilan dan Pemosisian lainnya.

Font Kustom Mudah adalah opsi yang bagus untuk siapa saja yang ingin menambahkan font kustom ke WordPress dari Google. Namun, jika mau, Anda juga dapat menambahkan Google Font secara manual ke situs web Anda menggunakan kode saja, tanpa plugin. Mari kita cari tahu bagaimana melakukan ini…

Cara Menambahkan Font Google ke WordPress Secara Manual (tidak diperlukan plugin)

Jika Anda lebih suka menambahkan Google Font ke WordPress secara manual, maka Anda akan membutuhkan pengetahuan dasar tentang pengkodean.

Langkah 1: Pilih Google Font

Untuk memulai, buka Google Font, dan pilih jenis font khusus yang ingin Anda tambahkan ke situs web Anda.

Kemudian pada halaman font, klik Select this Font . Di sini kita telah memilih font Indie Flower.

Sebuah popup sekarang akan muncul di layar Anda. Bergantung pada font yang telah Anda pilih, Anda akan dapat mengakses pilihan opsi penyesuaian untuk bobot dan gaya font, serta melihat info sematan.

Langkah 2: Sematkan Kode Font Kustom di Situs WordPress Anda

Selanjutnya, Anda perlu menyalin kode Embed (lihat popup di atas) dan menempelkannya ke bagian <head> dari tema WordPress Anda. Cara termudah untuk melakukannya adalah dengan menginstal plugin WordPress gratis Insert Headers and Footers. Dengan menggunakan plugin ini Anda dapat dengan cepat menambahkan kode ke situs web Anda tanpa harus mengedit file tema Anda.

Setelah instalasi, buka pengaturan plugin dengan memilih Settings > Insert Header and Footers dari dashboard WordPress Anda. Anda kemudian perlu menambahkan kode embed Google Fonts Anda ke bagian Header.

Demikian pula, jika Anda lebih suka, Anda dapat mengedit file header.php dari tema anak Anda.

Langkah 3: Terapkan Font Baru Menggunakan CSS

Setelah Anda menambahkan kode HTML untuk font kustom Anda ke situs web Anda, Anda sekarang dapat menggunakan CSS untuk menerapkan font kustom baru Anda. Di popup Google Fonts, Anda akan menemukan aturan CSS yang khusus untuk font baru Anda.

Kembali ke Customizer di sisi langsung situs web Anda, pilih CSS tambahan. Di sini Anda dapat memasukkan kode CSS untuk menyesuaikan font di situs Anda. Di bawah ini Anda dapat melihat kami telah menerapkan kode CSS Indie Flower ke bagian header 2 dan paragraf…

Penyesuai akan menunjukkan kepada Anda perubahan font secara real-time, dan jika Anda puas dengan hasilnya, klik Terbitkan .

Cara Menambahkan Font Adobe ke WordPress

Jika Anda telah mendaftar untuk paket Adobe Creative Cloud premium, maka Anda akan dapat menambahkan font khusus apa pun ke situs web WordPress Anda. Proses ini sangat mirip dengan menambahkan Google Font secara manual ke situs Anda. Mari kita lihat sekilas.

Langkah 1: Pilih Font Adobe

Hal pertama yang pertama, Anda perlu menelusuri perpustakaan font Adobe yang ekstensif dan memilih font yang sesuai dengan proyek Anda. Setelah Anda membuat pilihan, klik ikon </> untuk menambahkan font ke Proyek Web baru.

Anda sekarang akan diminta untuk memberi nama Proyek Web Anda, serta menggunakan kotak centang untuk memilih bobot dan gaya font yang ingin Anda sertakan. Kemudian pilih Buat Proyek .

Langkah 2: Sematkan Kode Font Adobe di Situs WordPress Anda

Langkah selanjutnya adalah menyematkan kode yang disediakan Adobe untuk font pilihan Anda ke situs web WordPress Anda.

Ini mengikuti proses yang persis sama dengan menyematkan kode Google Font. Cukup sematkan kode ke tag <head> di situs web Anda atau gunakan plugin WordPress Sisipkan Header dan Footer (seperti yang telah dibahas sebelumnya).

Langkah 3: Terapkan Font Baru Menggunakan CSS

Sekali lagi, seperti Google Fonts, Anda sekarang dapat menerapkan font kustom Adobe baru Anda menggunakan aturan CSS. Di dasbor Adobe Anda, halaman Proyek Web Anda akan mencantumkan nama keluarga font CSS, serta gaya font dan bobot numerik, untuk setiap jenis font yang Anda pilih.

Kembali ke situs WordPress Anda, aturan CSS ini dapat digunakan di dalam Customizer di bawah CSS Tambahan.

Jadi sekarang kami telah membahas cara menambahkan font khusus ke WordPress menggunakan Google Font gratis yang sangat populer serta sumber daya premium yang mengesankan, Adobe Fonts.

Namun, opsi terakhir yang akan kita diskusikan memungkinkan Anda menambahkan font khusus apa pun ke situs web Anda dengan mengunggahnya ke server situs Anda. Mari kita cari tahu lebih lanjut.

Cara Menambahkan Font Kustom ke Ruang Web Anda

Menambahkan font khusus ke ruang web Anda relatif mudah, tetapi sekali lagi, Anda memerlukan pemahaman dasar tentang CSS untuk menerapkan font ke situs web Anda.

Langkah 1: Unduh Font Kustom

Seperti yang disebutkan di awal artikel ini, ada banyak sumber di mana Anda dapat memilih font kustom gratis atau premium untuk digunakan di situs web Anda. Saat memilih font khusus untuk ditambahkan ke server Anda, pastikan Anda memiliki hak untuk menggunakannya, dan font tersebut dapat diunduh.

Di sini kami telah mengunduh Milkshake font kustom gratis dari Squirrel Fonts.

Penting untuk mengunduh font khusus Anda dalam format font web. Format wadah font web WOFF menikmati dukungan lintas-browser paling banyak, tetapi Google merekomendasikan untuk memberikan beberapa format untuk memberikan pengalaman yang konsisten bagi pengguna di seluruh perangkat.

Jika Anda perlu mengonversi font khusus Anda ke dalam format yang berbeda, Squirrel Font menyediakan alat Generator Webfont gratis yang memungkinkan Anda melakukannya.

Langkah 2: Unggah Font Kustom ke Server Anda

Langkah selanjutnya adalah mengunggah font khusus Anda ke server Anda. Untuk melakukannya, buka File Manager di cPanel situs Anda.

Kemudian di dalam folder tema aktif Anda, buat folder baru bernama Font dan unggah font khusus Anda di sini.

Jika Anda memiliki beberapa format font, unggah semuanya ke folder Font . Font kustom Anda sekarang telah ditambahkan ke ruang web Anda.

Langkah 3: Gunakan CSS untuk Menerapkan Font Kustom ke Situs Web Anda

Anda sekarang perlu menerapkan font khusus ke situs web Anda. Untuk memulainya, Anda perlu memuat font di lembar gaya tema Anda. Untuk melakukannya, buka Penyesuai WordPress dan di bawah CSS tambahan tambahkan kode ini:

 @font-wajah {
    font-family: Milkshake;
    src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         format("woff");
}

Yang penting, pastikan Anda mengubah nama font dan URL (salin URL untuk file font di server Anda).

Anda kemudian dapat melanjutkan dan menggunakan aturan CSS untuk memperbarui font di situs Anda. Berikut adalah contoh cara menerapkan font khusus ke Header 3 dan bagian paragraf:

Setelah Anda puas dengan tampilan font khusus baru di situs web Anda, klik Publikasikan .

Pemikiran Terakhir tentang Cara Menambahkan Font Kustom ke WordPress

Seperti yang Anda lihat, jika Anda mencari font kustom yang indah dan menarik perhatian, maka ada banyak sumber yang memungkinkan Anda menemukan font yang sempurna untuk proyek Anda. Dan terlebih lagi, Anda sekarang dipersenjatai dengan pengetahuan tentang cara berhasil menambahkan font khusus ke WordPress. Jadi, font kustom mana yang akan Anda pilih?

Punya pertanyaan tentang cara menambahkan font khusus ke WordPress? Silakan tanyakan di komentar di bawah…