Rasanya membosankan dengan font Sans Serif yang itu-itu aja seperti Arial, Helvetica, dan lainnya? Muak dengan semua font default yang ada? Jelasnya Sampeyan ingin menonjol dong dari yang lain-lainnya. Jadi mengapa nggak mencoba font yang berbeda? iya font kustom sesuai keinginan kita.
Meskipun Elementor sudah meng-include lebih dari 800+ font Google yang berbeda untuk bisa digunakan, kadang-kadang, font Google yang default pun ngebosenin dan nggak eye catching.
Mengingat betapa bermanfaatnya berinvestasi dalam typography website, maka banyak desainer web ingin dapat memaksimalkan gaya dan profesionalisme yang ekstra tersebut, dimana bisa didapat hanya dengan font khusus. Okay, kita akan belajar dengan cara termudah untuk bisa menggunakan font kustom Sampeyan sendiri tanpa plugin font tambahan.
Cukup upload format font kustom Sampeyan, dan cek secara instan di dalam pengaturan typography widget.
FONTS
Daftar isi:
Tipe Format Font
Agar font kastom ini muncul di website Sampeyan, font harus di upload dulu ke website Sampeyan (dihostingkan) sebagai format file standar. Ada beberapa format font tersebut, masing-masing jelas menawarkan dukungan untuk browser yang berbeda. Tipe font termasuk:- Web Open Font Format (WOFF) - WOFF adalah format yang paling direkomendasikan untuk digunakan karena didukung oleh semua browser modern
- Web Open Font Format (WOFF 2.0) - Font TrueType (TTF) / OpenType (OTF) yang memberikan kompresi yang lebih baik daripada WOFF 1.0
- TrueType Fonts (TTF) - Font ini dikembangkan pada akhir 1980-an oleh Apple dan Microsoft.
- SVG Fonts/Shapes – Font SVG memungkinkan SVG digunakan sebagai glyph saat menampilkan teks. Pastikan untuk menggunakan format ini untuk iPhone versi tua
- Embedded OpenType Fonts (EOT) - File font ini berfungsi di IE, tetapi tidak di browser lain. Pastikan untuk menggunakan format ini untuk versi IE yang lebih tua.
Menambahkan Font Kustom ke WordPress Secara Manual
Ada metode tradisional untuk menambahkan font custom ke WordPress secara manual, tetapi memang membutuhkan beberapa paham webbing dasar terutama CSS dan mungkin bakalan bikin bingung bagi pengguna pemula.- Tambahkan folder "font" baru ke folder thema Sampeyan melalui FTP atau web panel. Folder baru harus terletak di bawah wp-content/themes/fonts
- Setelah Sampeyan menambahkan folder "font", lakukan upload semua file font ke dalamnya.
- Sekarang, buka stylesheet thema, style.css pada root theme dan tambahkan kode berikut ke dalamnya:
@font-face {
font-family: ‘nameofnewfont‘;
src: url(‘fonts/nameofnewfont.ttf/eot);
font-weight: normal;
font-style: normal; } - Konfigurasikan elemen yang akan menggunakan font ini dengan menambahkannya ke stylesheet yang sama.
Metode ini bisa cukup bikin ngilu bagi pemula yang tidak memahami CSS. Setiap kali Sampeyan ingin menambahkan konfigurasi seperti "miring" atau "tebal", Maka Sampeyan harus melalui proses yang sama dan menambahkan parameter tersebut. Ada banyak script writing yang terlibat.
Menambahkan Font Kustom ke WordPress Menggunakan Elementor
Elementor telah menambahkan integrasi yang mudah untuk font Typekit, memungkinkan Sampeyan untuk menyinkronkan dan menggunakan semua font Typekit mudah. Kontrol font total dan mengubah font sebanyak yang Sampeyan inginkan dengan Elementor.Masuk pada Dashboard > Elementor > Custom Fonts, dan ‘Add new’.
Lalu tambahkan font apa pun dengan menambahkan nama font dan upload file WOFF, WOFF2, TTF, SVG atau EOT. Disarankan agar Sampeyan mengunggah file font semua versinya guna memberikan support pada browser client.
Setelah terupload, font kustom Sampeyan akan tersedia pada panel kontrol typography setiap widget yang berisi teks. Buka Elementor dan mulai gunakan font baru di halaman Sampeyan. Tambahkan judul atau widget teks lainnya, dan di bawah Style > Typography, lalu pilih font kustom Sampeyan.
Menggunakan Font Kustom di Elementor
Adobe Typekit sudah tersedia pada Elementor.
Adobe Typekit adalah layanan berlangganan untuk font yang bisa Sampeyan sinkronkan ke komputer atau digunakan di website. Dengan Typekit, Sampeyan dapat dengan mudah mendownload salah satu dari ribuan font adobe yang tersedia, dan mengaplikasikannya di website Sampeyan.
Adobe menawarkan 2 font Typekit secara gratis, sehingga Sampeyan dapat mencobanya terlebih dahulu.
Keuntungan terbesar menggunakan Typekit pada proyek desain web akan terintegrasi dengan lebih gampang. Desainer, yang sudah menggunakan Photoshop, akan mendapatkan akses instan ke ribuan font profesional dari dalam antarmuka mereka, semuanya disinkronkan dan cukup mudah digunakan dan nggak perlu lagi melakukan download-upload font atau pengaturan yang cukup membingungkan.
Typekit bekerja dengan cukup mudah pada Elementor dimana sampeyan cukup memasukkan tombol Typekit pada dashboard pengaturan (tab Integrasi), dan langsung mendapatkan semua font Typekit di dalam berbagai pengaturan typography Elementor. Dengan menggunakan integrasi ini, Sampeyan tidak perlu mendownload, menginstal, atau memberi kode apa pun untuk menggunakan font Typekit.
Di bawah Pengaturan > Elementor > Integrasi Sampeyan bisa menambahkan ID Kit Typekit. Setelah ditambahkan, klik 'Sync Kit'. Tunggu beberapa menit, dan Sampeyan akan menemukan semua font Typekit di Elementor. Setelah menambahkan font baru ke akun Typekit, jangan lupa untuk kembali ke halaman integrasi dan menyinkronkan font lagi.
