Cara Menambahkan Font Khusus di Website

Bagikan

Apakah Anda ingin menambahkan font khusus di Website?

Font khusus akan memudahkan Anda menggunakan kombinasi indah dari berbagai font di situs web Anda untuk meningkatkan tipografi serta tampilan web Anda.

Selain terlihat bagus, font khusus juga dapat membantu Anda meningkatkan keterbacaan, menciptakan citra merek, dan meningkatkan waktu yang dihabiskan pengguna di situs web Anda.

Pada artikel ini, kami akan menunjukkan cara menambahkan font khusus di Website menggunakan metode Google Font, TypeKit, dan CSS3 @Font-Face.

Catatan: Memuat terlalu banyak font dapat memperlambat situs web Anda. Kami menyarankan untuk memilih dua font dan menggunakannya di seluruh situs web Anda. Kami juga akan menunjukkan cara memuatnya dengan benar tanpa memperlambat situs web Anda.

Sebelum kita melihat cara menambahkan font kustom di Website, mari kita lihat menemukan font kustom yang dapat Anda gunakan.

Cara Menemukan Font Khusus untuk Digunakan di Website

Font dulu mahal, tapi sekarang tidak lagi. Ada banyak tempat untuk menemukan font web gratis yang bagus seperti Google Fonts, Typekit, FontSquirrel, dan fonts.com.

Jika Anda tidak tahu cara memadupadankan font, cobalah Font Pair. Ini membantu desainer memasangkan font Google yang indah.

Saat Anda memilih font, ingatlah bahwa menggunakan terlalu banyak font khusus akan memperlambat situs web Anda. Inilah sebabnya mengapa Anda harus memilih dua font dan menggunakannya di seluruh desain Anda. Ini juga akan membawa konsistensi pada desain Anda.

Menambahkan Font Khusus di Website dari Google Font

Google Fonts adalah perpustakaan font terbesar, gratis, dan paling umum digunakan di antara pengembang situs web. Ada beberapa cara Anda dapat menambahkan dan menggunakan Google Font di Website.

Metode 1: Menambahkan Font Khusus Menggunakan Plugin Easy Google Font

Jika Anda ingin menambahkan dan menggunakan Google Font di situs web Anda, maka metode ini sejauh ini paling mudah dan direkomendasikan untuk pemula.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Easy Google Fonts. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin Website.

Setelah aktivasi, Anda bisa pergi ke Appearance » Customizer page. Ini akan membuka tampilan penyesuai tema secara langsung dan Anda akan melihat bagian Tipografi baru.

Mengklik Tipografi akan menampilkan berbagai bagian situs web tempat Anda dapat menerapkan Google Font. Cukup klik ‘Edit Font’ di bawah bagian yang ingin Anda edit.

Di bawah bagian font, Anda dapat memilih Google Font yang ingin Anda gunakan di situs web Anda. Anda juga dapat memilih gaya font, ukuran font, padding, margin, dan lainnya.

Tergantung pada tema Anda, jumlah bagian di sini dapat dibatasi dan Anda mungkin tidak dapat secara langsung mengubah pemilihan font untuk berbagai area situs web Anda.

Untuk memperbaikinya, plugin juga memungkinkan Anda membuat kontrol sendiri dan menggunakannya untuk mengubah font di situs web Anda.

Pertama, Anda perlu mengunjungi Settings »Google Fonts halaman dan berikan nama untuk kontrol font Anda. Gunakan sesuatu yang membantu Anda memahami dengan cepat di mana Anda akan menggunakan kontrol font ini.

Selanjutnya, klik tombol ‘Save font control’ dan kemudian Anda akan diminta untuk memasukkan pemilih CSS.

Anda dapat menambahkan elemen HTML yang ingin Anda targetkan (misalnya, h1, h2, p, blockquote) atau menggunakan kelas CSS.

Anda dapat menggunakan alat Inspeksi di browser Anda untuk mengetahui kelas CSS mana yang digunakan oleh area tertentu yang ingin Anda ubah.

Sekarang klik tombol ‘Save font control’ untuk menyimpan pengaturan Anda. Anda dapat membuat pengontrol font sebanyak yang Anda butuhkan untuk berbagai bagian situs web Anda.

Untuk menggunakan pengontrol font ini, Anda harus menuju ke Appearance » Customizer dan klik pada tab Typography.

Di bawah Typography, Anda sekarang akan melihat Opsi ‘ThemeTypography’ juga. Mengkliknya akan menampilkan kontrol font khusus yang Anda buat sebelumnya. Anda sekarang dapat mengklik tombol edit untuk memilih font dan tampilan untuk kontrol ini.

Jangan lupa untuk mengklik tombol ‘Save’ atau ‘Publish’ untuk menyimpan perubahan Anda.

Metode 2: Tambahkan Font Google Secara Manual di Website

Metode ini mengharuskan Anda untuk menambahkan kode ke file tema Website Anda. Jika Anda belum pernah melakukan ini sebelumnya, lihat panduan kami tentang cara menyalin dan menempelkan kode di Website.

Pertama, kunjungi Google Fonts Library  dan pilih font yang ingin Anda gunakan. Selanjutnya, klik tombol penggunaan cepat di bawah font.

Pada halaman font, Anda akan melihat gaya yang tersedia untuk font tersebut. Pilih gaya yang ingin Anda gunakan dalam proyek Anda, lalu klik tombol bilah sisi di bagian atas.

Selanjutnya, Anda harus beralih ke tab ‘Embed’ di bilah sisi untuk menyalin kode sematan.

Ada dua cara Anda dapat menambahkan kode ini ke situs Website Anda.

Pertama, Anda cukup mengedit file header.php tema Anda dan menempelkan kode sebelum tag <body>.

Namun, jika Anda tidak terbiasa dengan pengeditan kode di Website, Anda dapat menggunakan plugin untuk menambahkan kode ini.

Cukup instal dan aktifkan plugin Insert Headers and Footers. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin Website.

Setelah aktivasi, buka halaman Settings » Insert Headers and Footers dan rekatkan kode embed di kotak ‘Script in header’.

Jangan lupa klik tombol Save untuk menyimpan perubahan Anda. Plugin sekarang akan mulai memuat kode embed Google Font di semua halaman situs web Anda.

Anda dapat menggunakan font ini di stylesheet tema Anda seperti ini:

Untuk instruksi lebih rinci, lihat panduan kami tentang cara menambahkan font Google di tema Website.

Menambahkan Font Kustom di Website Menggunakan Typekit

Typekit oleh Adobe Fonts adalah sumber gratis dan premium lainnya untuk font mengagumkan yang dapat Anda gunakan dalam proyek desain Anda. Mereka memiliki langganan berbayar serta paket gratis terbatas yang dapat Anda gunakan.

Cukup mendaftar untuk akun Adobe Fonts dan kunjungi bagian jelajahi font. Dari sini Anda perlu mengklik tombol </> untuk memilih font dan membuat proyek.

Selanjutnya, Anda akan melihat kode sematan dengan ID proyek Anda. Ini juga akan menunjukkan cara menggunakan font di CSS tema Anda.

Anda perlu menyalin dan menempelkan kode ini di dalam bagian <head> situs web Anda.

Ada dua cara Anda dapat menambahkan kode ini ke situs Website Anda.

Pertama, Anda cukup mengedit file header.php tema Anda dan menempelkan kode sebelum tag <body>.

Namun, jika Anda tidak terbiasa dengan pengeditan kode di Website, Anda dapat menggunakan plugin untuk menambahkan kode ini.

Cukup instal dan aktifkan plugin Insert Headers and Footers. 

Setelah aktivasi, buka halaman Settings » Insert Headers and Footers dan rekatkan kode embed di kotak ‘Script in header’.

Itu saja, Anda sekarang dapat menggunakan font Typekit yang Anda pilih di stylesheet tema Website Anda seperti ini:

Untuk instruksi lebih rinci, lihat tutorial kami cara menambahkan tipografi yang mengagumkan di Website menggunakan Typekit.

Menambahkan Font Kustom di Website Menggunakan CSS3 @font-face

Cara paling langsung untuk menambahkan font kustom di Website adalah dengan menambahkan font menggunakan metode CSS3 @font-face. Metode ini memungkinkan Anda untuk menggunakan font apa pun yang Anda suka di situs web Anda.

Hal pertama yang perlu Anda lakukan adalah mengunduh font yang Anda sukai dalam format web. Jika Anda tidak memiliki format web untuk font Anda, Anda dapat mengonversinya menggunakan generator FontSquirrel Webfont. 

Setelah Anda memiliki file webfont, Anda harus mengunggahnya ke server hosting Website Anda.

Tempat terbaik untuk mengunggah font adalah di dalam folder “font” baru di direktori tema atau tema anak Anda.

Anda dapat menggunakan FTP atau File Manager dari cPanel Anda untuk mengunggah font.

Setelah Anda mengunggah font, Anda perlu memuat font di stylesheet tema Anda menggunakan aturan CSS3 @font-face seperti ini:

Jangan lupa untuk mengganti font-family dan URL dengan milik Anda.

Setelah itu Anda dapat menggunakan font itu di mana saja di stylesheet tema Anda seperti ini:

Memuat font secara langsung menggunakan CSS3 @font-face tidak selalu merupakan solusi terbaik. Jika Anda menggunakan font dari Google Fonts atau Typekit, maka yang terbaik adalah menyajikan font langsung dari server mereka untuk kinerja yang optimal.

Demikian panduan dari Webzid, kami harap artikel ini membantu Anda menambahkan font khusus di Website. Anda mungkin juga ingin memeriksa panduan kami tentang cara menggunakan font ikon di Website dan cara mengubah ukuran font di Website.

Subscribe & Dapatkan Info Lainnya

WEBZID DEVELOPER

Berita Terkait