Cara Menambahkan Font Offline Ke Situs WordPress Anda

Jika Anda ingin menambahkan beberapa kepribadian ekstra ke situs WordPress Anda, maka Anda mungkin ingin mempertimbangkan untuk memuat font offline. Meskipun ada banyak cara untuk melakukannya, kami akan menunjukkan kepada Anda salah satu metode termudah menggunakan Font Squirrel Webfont Generator. Setelah file font Anda diunduh, Anda dapat mengunggahnya ke situs WordPress Anda dan menggunakannya seperti font lainnya. Mari kita mulai!

Artikel ini telah duduk di meja saya selama beberapa waktu, dan saya ingin membaginya dengan Anda. Font Google dimuat penuh secara lokal. Saya telah menggunakan font Google Oswald dan Lato dari Crunchify.com sejauh ini. Cukup buka URL pada gambar di atas yang muncul di tab baru dan Anda akan melihat bahwa itu telah menghasilkan 14 font baru . Tutorial ini juga akan membantu jika Anda memiliki pertanyaan berikut. Setelah Anda mengekstrak file Lato.zip, Anda akan dapat melihat kesepuluh font Lato dengan ekstensi .ttf. Di sebagian besar situs web, Anda hanya memerlukan font biasa, tebal, dan miring.

Pada Langkah 2, Anda sekarang harus mengonversi font Anda ke format woff2, eot,svg, ttf, dan wof. File dapat diunggah ke situs https://Font-Converter.net/en yang akan mengonversi font ke format ini. Tidak ada lagi yang perlu dikatakan. Anda sekarang dapat memuat font dari sistem file lokal Anda.

Bagaimana Saya Menambahkan Font Kustom ke Tema WordPress?

Ada beberapa cara berbeda untuk menambahkan font khusus ke tema WordPress Anda. Salah satu caranya adalah dengan menggunakan perpustakaan Google Fonts. Anda dapat menemukan daftar lengkap semua font yang tersedia di situs web Google Font. Setelah Anda menemukan font yang Anda suka, Anda dapat menambahkan kode ke stylesheet tema Anda (style.css). Misalnya, jika Anda ingin menggunakan font “Open Sans”, Anda akan menambahkan kode berikut ke stylesheet Anda: body { font-family: 'Open Sans', sans-serif; } Cara lain untuk menambahkan font kustom ke tema WordPress Anda adalah dengan menggunakan plugin seperti Easy Google Fonts . Plugin ini memudahkan untuk menambahkan font khusus ke tema Anda tanpa harus mengedit kode apa pun.

Plugin Easy Google Fonts dapat digunakan untuk menambahkan font khusus ke situs WordPress Anda. Dengan menggunakan metode ini, Anda akan dapat menarik perhatian ke situs web Anda dengan menggunakan berbagai macam font. Tipografi telah terbukti memiliki sejumlah manfaat dalam penelitian. Situs web yang sederhana memudahkan pelanggan untuk berkomunikasi dengan Anda. Dengan menggunakan properti CSS, Anda dapat mengubah gaya dan posisi font pilihan Anda selain mengubah gaya dan posisinya. Selain kontrol font Anda sendiri, Anda dapat menggunakan halaman pengaturan plugin WordPress untuk menambahkannya. Jika Anda tidak ingin menggunakan plugin, Anda dapat menggunakan yang ini sebagai ganti font Adobe.

Instal plugin Custom Adobe Fonts untuk mempermudah memasukkan font-font ini ke situs WordPress Anda. Instal plugin, lalu navigasikan ke perpustakaan font Adobe yang luas untuk menemukan font yang cocok untuk Anda (Anda harus mendaftar untuk menggunakannya). Setelah Anda memilih font, klik di atasnya dan kemudian cari di sudut kanan atas halaman untuk 'Tambahkan ke proyek web.' Menggunakan Font Pair, Anda dapat melihat seperti apa kombinasi font Anda, dan Anda dapat mencampur dan mencocokkan font berdasarkan apa yang Anda lihat. Ada beberapa situs web luar biasa yang menjual font khusus yang dibuat oleh perancangnya sendiri. Pustaka font besar disertakan dengan font Squirrel, dan juga mudah diterapkan. Anda dapat menggunakan kit font web @Font-Face.

Situs web WordPress Anda sekarang harus siap digunakan. Kit ini menyertakan file font serta stylesheet yang berisi kode yang Anda perlukan untuk membuat stylesheet CSS Anda sendiri. Misalnya, kita perlu menggunakan CSS berikut untuk font web OpenSans-ExtraBold-. Solusi terbaik adalah menyimpan semua file font di lokasi pilihan Anda.

Cara Memuat Google Font Di WordPress

Arahkan ke panel admin WordPress dan pilih Add New. Unduh dan instal Font Google Mudah dari Google Play Store. Setelah menginstal plugin, Anda harus mengklik tombol Activate untuk mulai menggunakannya.

Di situs web atau produk digital Anda, Anda dapat menggunakan Google Font untuk bereksperimen dengan lebih dari 1000 jenis font yang berbeda. Jika Anda ingin menambahkan font Google secara manual ke situs WordPress Anda, ada beberapa opsi. Mereka gratis dan open source, sehingga dapat digunakan oleh pengembang mana pun. Cara paling mudah untuk mengintegrasikan font Google adalah dengan menyertakan cuplikan dengan URL ke keluarga font tertentu di file functions.php Anda. Jika Anda merasa proses manualnya sulit, Anda dapat menggunakan plugin. Anda dapat menginstal plugin terlebih dahulu dengan mengunjungi repositori plugin WordPress. Sekarang harus diinstal dan diaktifkan.

Sebagian besar tema WordPress menyertakan integrasi font Google sebagai bagian dari pengaturan default. Plugin yang membentuk platform OMGF memungkinkan Anda menelusuri lebih dari 600 font di situs web Anda. Di menu tarik-turun 'Keluarga Font', Anda dapat memilih lebih dari 100 jenis berbeda untuk berbagai bagian situs Anda. Ada beberapa opsi untuk menambahkan kontrol font khusus , seperti yang ditunjukkan pada pratinjau penyesuai.

Haruskah Saya Memuat Google Font Lokal WordPress?

Jika situs WordPress Anda memiliki kesalahan Google Font, Anda harus memuat font Google secara lokal untuk mengatasinya. Ada beberapa sumber daya dan skrip eksternal yang tidak dapat Anda kendalikan, yang membuat kompresi, perkecilan, atau pengoptimalan menjadi tidak mungkin. Kecepatan WordPress Anda akan sangat terhambat jika Anda tidak mengambil tindakan pencegahan ini.

Wp-konten/tema/tema-anda/font

Folder wp-content/themes/your-theme/fonts adalah tempat Anda dapat menyimpan font khusus yang ingin Anda gunakan dengan tema Anda. Font dapat ditambahkan ke folder ini melalui FTP atau dengan menggunakan plugin pengelola file. Setelah font ditambahkan ke folder ini, font tersebut dapat digunakan di CSS tema Anda dengan merujuk nama font.

Gaya Global dapat digunakan untuk mengubah font situs web Anda jika menggunakan salah satu tema berikut. Dalam hal ini, font dasar dan font heading berada dalam pasangan font yang sama. Untuk menyimpan pasangan font baru, klik tombol Publish di menu Global Styles, atau klik Reset untuk mengembalikan perubahan. Setelah Anda memilih font kustom yang sesuai, Anda dapat mengubahnya sesering yang Anda inginkan. Jika Anda ingin mengubah ukuran font heading atau font dasar, Anda dapat melakukannya dengan memilih opsi ukuran di bawah dan di sebelah kanan setiap font, lalu memilih ukuran dari menu drop-down. Dengan CSS khusus, Anda dapat mengubah ukuran font default global. Pastikan Anda menonaktifkan atau menghapus plugin jika Anda memutuskan untuk berhenti menggunakannya setelah mengujinya. Tidak mungkin menautkan akun Typekit.com ke blog atau situs web WordPress.com. Jika Anda ingin menguji kompatibilitas font tertentu dengan bahasa tertentu, gunakan Customizer.

Tambahkan Font Ke WordPress Tanpa Plugin

Ada beberapa cara untuk menambahkan font ke WordPress tanpa plugin. Salah satu caranya adalah dengan menggunakan perpustakaan Google Fonts. Cukup buka situs web Google Fonts, pilih font yang ingin Anda gunakan, lalu salin kode yang diberikan. Selanjutnya, buka dashboard WordPress Anda dan pergi ke Appearance > Customize. Kemudian, klik pada tab “CSS Tambahan” dan rekatkan kode yang Anda salin dari Google Font. Simpan perubahan Anda, dan font baru akan diterapkan ke situs web Anda.

Tema tidak harus menyertakan font web dalam pengaturan defaultnya. Saat menjelajahi halaman web, Anda akan dapat mengunduhnya menggunakan browser Anda. Untuk menyalin dan menempelkan kode font ke file tema Anda, cukup pilih font yang Anda inginkan. Anda dapat menggunakan beberapa font secara bersamaan, dan Anda akan melihat berapa lama font dimuat. Tambahkan lebih banyak CSS ke blog WordPress Anda dengan membuka dasbor blog WordPress. Salin seluruh kode dari kotak abu-abu 1 ke dalam font web teks isi. Keluarga font web baru dapat ditemukan di kotak abu-abu kedua perpustakaan font Google . Selain itu, kode berikut dapat digunakan untuk mengatur ukuran font dan berat font.