Jika Anda ingin situs web Anda benar-benar menonjol dari keramaian, 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 penerapan font khusus untuk situs web Anda. Ini termasuk…
Di mana menemukan font khusus Bagaimana cara menambahkan Google Font ke situs web Anda menggunakan plugin Mudah Google Font Menambahkan Google Font ke situs web Anda secara manual (tidak diperlukan plugin) Menambahkan Adobe Font ke WordPress Cara Menambahkan Font Kustom ke Ruang Web Anda
Siap memulai?…
Saat ini, banyak tema WordPress premium dikirimkan dengan sejumlah font khusus. Namun, ini sering dapat meningkatkan bloat tema, dan berdampak pada situs web Anda memuat kali lebih dari yang Anda pikirkan. Anda juga akan menemukan bahwa Anda sebenarnya hanya menggunakan beberapa font khusus paling banyak, sehingga mayoritas font yang disediakan oleh tema Anda tidak akan pernah dibutuhkan.
Karena itu, kami sarankan memilih yang ringan Tema WordPress, yang kemudian dapat Anda tambahkan font khusus jika perlu. 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 sumber terbuka yang dapat digunakan dalam lebih dari 135 bahasa. Font-font ini dapat dengan cepat ditelusuri dan kemudian diintegrasikan ke dalam proyek desain web apa pun. Adobe Fonts (Sebelumnya dikenal sebagai Typekit) – Meskipun Typekit menawarkan versi gratis dan premium dari layanannya, yang 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 untuk mereka yang kurang memerhatikan desain. Tupai Font – Di perpustakaan Font Squirrel Anda akan menemukan campuran font gratis dan premium, yang terakhir yang dapat dibeli sebagai pembelian satu kali. Sekali lagi, Anda dapat memilih dari ribuan font berkualitas tinggi, mayoritas yang bebas dan berlisensi secara komersial. Fonts.com – Menyediakan lebih dari 150.000 produk font desktop dan web, Font.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 menggabungkan font dari Google Font, membantu Anda menemukan kombinasi font yang tepat untuk situs web Anda.
Jadi, sekarang Anda tahu di mana menemukan font khusus. Mari kita lihat selanjutnya bagaimana cara menambahkan Google Fonts ke situs web WordPress Anda …
Karena Google Fonts adalah sumber daya paling populer untuk font khusus, kami akan mulai dengan melihat cara menambahkan font dari pustaka ini ke situs web Anda. Ada beberapa cara untuk melakukan ini, tetapi opsi tercepat dan termudah adalah dengan menggunakan plugin WordPress Google Font mudah.
Easy Google Fonts adalah gratis Plugin WordPress yang akan memungkinkan Anda untuk memasukkan font khusus ke situs web WordPress Anda, tanpa harus menyentuh garis kode. Integrasi dengan penyesuai WordPress, plugin ini akan memungkinkan Anda untuk memasukkan dan menggunakan font Google di bagian depan situs web Anda secara real-time, tanpa harus me-refresh halaman.
Jadi sekarang mari kita cari tahu cara menginstal dan menggunakan plugin ini …
Untuk memulai dengan Easy Google Fonts, buka dasbor WordPress Anda dan pilih Plugin> Tambah Baru dari menu.
Kemudian ketik Google Font mudah ke dalam fungsi pencarian, dan setelah plugin telah diambil, klik Instal> Aktifkan.
Anda sekarang akan menemukan Easy Google Fonts di bawah Pengaturan di menu WordPress Anda.
Setelah Anda menginstal Easy Google Fonts, dari menu WordPress Anda pilih Penampilan> Kustomisasi. Situs web Anda sekarang akan terbuka di front-end, di mana Anda akan menemukan Tipografi Bagian telah ditambahkan ke penyesuai.
Klik Tipografi. Anda kemudian dapat memilih area yang berbeda dari situs web Anda di mana Anda ingin menerapkan Google Font khusus (mis. 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 dulu bagaimana setiap font terlihat langsung di situs web Anda.
Anda tidak hanya dapat mengubah jenis font, Anda juga dapat mengubah warna, ukuran, posisi, dan banyak lagi. Setelah Anda puas dengan font baru Anda, klik Menerbitkan.
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 tema yang berbeda (selain paragraf atau tajuk), maka Anda harus membuat kontrol font khusus sendiri. Meskipun Easy Font Control memungkinkan Anda melakukan ini dengan mudah, Anda masih membutuhkan pemahaman dasar pemilih CSS.
Untuk menambahkan kontrol font khusus, pilih Pengaturan> Font Google dari dashboard WordPress Anda. Lalu, di Edit Kontrol Font tab, beri grup kontrol font baru Anda nama yang sesuai, lalu pilih Buat Kontrol Font. Di sini kita akan membuat kontrol font untuk blockquotes …
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 khusus baru untuk elemen khusus tertentu, dan mengubah yang lain Penampilan dan Penentuan posisi pengaturan.
Munculan sekarang akan muncul di layar Anda. Bergantung pada font yang telah Anda pilih, dalam sembulan ini Anda akan dapat mengakses pilihan opsi penyesuaian untuk bobot dan gaya font, serta melihat info sematan.
Selanjutnya, Anda harus menyalin Menanamkan kode (lihat popup di atas) dan rekatkan ke bagian dari tema WordPress Anda. Cara termudah untuk melakukan ini adalah menginstal plugin WordPress gratis Masukkan Header dan Footer. 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 Pengaturan> Masukkan Header dan Footer dari dashboard WordPress Anda. Anda kemudian perlu menambahkan kode sematan Google Font Anda ke bagian Header …
Sama halnya, jika Anda mau, Anda bisa mengedit file header.php dari tema anak Anda.
Setelah menambahkan kode HTML untuk font khusus ke situs web Anda, sekarang Anda dapat menggunakan CSS untuk menerapkan font kustom baru Anda. Di popup Google Fonts, Anda akan menemukan aturan CSS yang spesifik 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 header 2 dan bagian paragraf …
Penyesuai akan menunjukkan kepada Anda perubahan font secara waktu nyata, dan jika Anda puas dengan hasilnya, klik Menerbitkan.
Jika Anda telah mendaftar untuk paket Creative Cloud premium Adobe, maka Anda akan dapat menambahkan font khusus apa pun ke situs web WordPress Anda. Proses ini sangat mirip dengan menambahkan Font Google secara manual ke situs Anda. Mari kita lihat sekilas …
Hal pertama yang pertama, Anda perlu menelusuri pustaka font Adobe yang luas dan memilih font yang sesuai dengan proyek Anda. Setelah Anda membuat pilihan, klik pada > ikon untuk menambahkan font ke yang baru Proyek Web.
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 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 masukkan kode ke dalam
tag di situs web Anda atau gunakan plugin WordPress. Masukkan Header dan Footers (seperti yang dibahas sebelumnya)Sekali lagi, seperti Google Font, sekarang Anda dapat menerapkan font khusus Adobe baru menggunakan aturan CSS. Di dasbor Adobe Anda, halaman Proyek Web Anda akan mencantumkan nama font-keluarga CSS, serta gaya font dan bobot numerik, untuk setiap jenis font yang Anda pilih.
Kembali ke situs WordPress Anda, aturan-aturan CSS ini dapat digunakan di dalam Customizer di bawah CSS tambahan.
Jadi sekarang kita telah membahas cara menambahkan font khusus ke WordPress menggunakan Google Font gratis yang sangat populer serta sumber daya premium yang mengesankan, Adobe Font.
Namun, opsi terakhir yang akan kami diskusikan memungkinkan Anda untuk menambahkan font khusus apa pun ke situs web Anda dengan mengunggahnya ke server situs Anda. Mari cari tahu lebih lanjut …
Menambahkan font khusus ke ruang web Anda relatif mudah, tetapi sekali lagi, Anda perlu pemahaman dasar tentang CSS untuk menerapkan font ke situs web Anda.
Seperti disebutkan di awal artikel ini, ada banyak sumber di mana Anda dapat memilih font khusus gratis atau premium untuk digunakan di situs web Anda. Saat memilih font khusus di add ke server Anda, pastikan Anda memiliki hak untuk menggunakannya, dan itu dapat diunduh.
Di sini kami telah mengunduh font khusus Milkshake dari Squirrel Fonts…
Jika Anda perlu mengubah font khusus menjadi format lain, maka Squirrel Font menyediakan gratis Generator Webfont alat yang akan memungkinkan Anda untuk melakukannya.
Langkah selanjutnya adalah mengunggah font khusus ke server Anda. Untuk melakukan ini, 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 banyak format font, unggah semuanya ke Font map. Font khusus Anda sekarang telah ditambahkan ke ruang web Anda.
Anda sekarang perlu menerapkan font khusus ke situs web Anda. Untuk memulainya, Anda perlu memuat font di stylesheet tema Anda. Untuk melakukannya, buka penyesuai WordPress dan di bawah CSS tambahan tambahkan kode ini …
@ font-face {
font-family; Milkshake
Src: url (https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.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 ini contoh cara menerapkan font khusus ke bagian Header 3 dan paragraf …
Setelah Anda puas dengan tampilan font khusus di situs web Anda, klik Menerbitkan.
Seperti yang Anda lihat, jika Anda mencari font khusus yang cantik dan menarik perhatian, maka ada banyak sumber daya 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 khusus apa yang akan Anda pilih?
Punya pertanyaan tentang cara menambahkan font khusus ke WordPress? Silakan tanyakan di komentar di bawah ini …
Tanda tangan email berfungsi sebagai cara ampuh bagi individu dan bisnis untuk meninggalkan kesan abadi…
Apakah kesalahan 'ERR_SSL_VERSION_OR_CIPHER_MISMATCH' menghentikan Anda mengakses situs web WordPress? Kesalahan ini hanya terlihat saat mengunjungi…
Jika Anda adalah individu yang banyak akal dan berpikiran maju yang bekerja di bidang pemasaran,…
Siap menguasai Google Analytics 4 dengan sedikit bantuan dari MonsterInsights? GA4 adalah alat analitik yang…
Apakah Anda mencari cara untuk menerjemahkan plugin WordPress ke dalam bahasa Anda? Dengan menerjemahkan plugin…
Mencari solusi untuk hack redirect WordPress? ???????? Peretasan pengalihan WordPress sayangnya merupakan kejadian umum dan…