Advertisement
  1. Web Design
  2. Typography

Perhitungan keluar @font-face

Scroll to top
Read Time: 6 min
This post is part of a series called A-Z of Web Typography.
Taking Ems Even Further
Understanding Typographic Hierarchy

Indonesian (Bahasa Indonesia) translation by Nur Muhammad Jazuli (you can also view the original English article)

5 tahun belakangan, typography di dalam web telah diambil dengan tampilan(maaf, diharapkan permainan kata-kata. Dan itu telah dipakai oleh web desainer dimana terkendala untuk memakai ukuran web-aman saja; sistem ukuran tersedia untuk semua pengguna komputer. Dapat kamu bayangkan (atau pengalaman pertama),  ini dapat membuat frustasi kita dengan tipe aneh, tapi kita telah sepakat dengan itu. Namun, dengan cara yang aneh itu bagus karena Anda memiliki satu set font terbatas untuk dipilih, sehingga waktu yang dihabiskan untuk memilih font yang sempurna sangatlah minim (saya tidak mengeluh). Namun sekarang, font khusus untuk tampilan dan nuansa yang ingin Anda capai adalah mungkin, dan perusahaan sekarang dapat memproyeksikan bahasa merek visual mereka melalui tipografi

Jadi ada beberapa metode untuk melayani jenis ke situs web kami, yang paling banyak digunakan adalah @font-face. Aturan CSS ini memberi kami kemampuan untuk mengunduh font dari server dan menggunakannya di halaman web kami yang memukau. Pada awalnya, dukungan browser sangat minim, tetapi sekarang didukung secara luas. Satu-satunya pengecualian adalah Opera Mini (c'mon guys).


Dasar

@font-face adalah aturan CSS yang menentukan nama font, lokasi dan font-weight. Dalam contoh yang disederhanakan di bawah ini, font disimpan di font-face.com dan jalur spesifik ditentukan. Itu bisa terlihat seperti ini:

Anda dapat melihat bahwa nama font diatur ke "DeliciousRoman". Ini adalah nama font yang kemudian akan direferensikan di tumpukan font CSS kami, bersama dengan font fallback jika font tidak dimuat:


Kompatibilitas Browser

Namun, semuanya tidak sesederhana ini. Karena browser yang berbeda memerlukan format font yang berbeda, kita harus yakin bahwa kita menyediakan semua opsi yang dibutuhkan.

Berikut daftar browser beserta jenis file yang didukungnya:

  • Internet Explorer: EOT
  • Mozilla browser: OTF dan TTF
  • Safari and Opera: OTF, TTF and SVG
  • Chrome: TTF and SVG
  • Mobile browsers like Safari on the iPad and iPhone: SVG

Kisah Kompatibilitas sangat Jauh

Ada beberapa konvensi berbeda dalam @font-face untuk mengatasi masalah kompatibilitas browser. Sangat bagus untuk mengetahui bagaimana @font-face telah berevolusi, dan sejarah cepat berikut menyediakan tautan ke jumlah bacaan yang solid pada subjek.

Paul Irish awalnya datang dengan sintaks font-wajah Bulletproof pada tahun 2009. Selama bertahun-tahun beberapa hacks telah muncul untuk mengatasi masalah kompatibilitas browser, yang paling kontroversial adalah hack wajah tersenyum.

Versi lain keluar disebut Mo 'Bulletproofer Syntax oleh Richard Fink, menangani masalah font yang terjadi di Android.

Akhirnya, kami telah sampai pada sintaks FontSpring @font-face syntax. Pendekatan ini menyederhanakan banyak bahasa dan terlihat seperti:

Pada contoh di atas, Anda dapat melihat font-nya di-host sendiri dan disimpan di server dalam folder bernama "font".

Jadi Di mana saya Dapatkan Semua Format Font ini?

Font Squirrel (dan beberapa lainnya) menyediakan handy webfont generator yang berguna yang akan mengubah font apa pun menjadi kit file web untuk disematkan. Termasuk dalam kit Anda akan menemukan semua file font yang diperlukan, sintaks khusus @font-face CSS, dan demo HTML. Anda kemudian dapat menempatkan file font langsung di server Anda dan menyesuaikan jalur di @font-face CSS.

Catatan: Peringatan adil, pastikan Anda memiliki hak yang cukup untuk menggunakan font yang Anda jalankan melalui generator dan gunakan di situs Anda.


Menggunakan Layanan Font Hosting

Bergantung pada apakah Anda menghosting sendiri atau menggunakan layanan font seperti Typekit (lebih lanjut tentang ini nanti), CSS Anda akan terlihat sedikit berbeda. Misalnya, dengan layanan seperti Typekit, Anda membuat, selesai, "kit" font yang berisi semua font yang akan Anda gunakan untuk setiap situs web tertentu. Untuk setiap kit yang Anda buat, Anda diberi cuplikan JavaScript untuk ditempatkan didalam <head> di dokumen HTML Anda. Cuplikan ini memuat aturan @font-face yang benar untuk peramban tertentu.

Untuk lebih lanjut tentang mengapa TypeKit menggunakan JavaScript, baca Better web font loading with JavaScript.

Dalam pengaturan kit, fonts.com menawarkan Anda akan menemukan tiga opsi penerbitan berbeda dengan keanggotaan paket premium. Selain opsi javascript yang serupa dengan Typekit, mereka juga menawarkan opsi non-JavaScript yang menaut ke lembar gaya yang disajikan dan opsi yang dihosting sendiri. Tergantung pada apa yang Anda pilih, jelas CSS Anda akan terlihat sedikit berbeda

Font Gratis atau Font Hosting?

Seperti yang Anda bayangkan, lisensi font menjadi masalah besar ketika menggunakan font di web. Penggunaan luas @font-face telah membawa cukup banyak ledakan font gratis, beberapa di antaranya sangat bagus, beberapa di antaranya tidak. Font Squirrel, Fontex dan DaFont adalah beberapa pilihan yang lebih dikenal untuk font gratis. Lost Type Coop adalah tempat bagus lain untuk mengambil font, donasi diterima. Google Fonts juga menawarkan banyak pilihan font gratis, meskipun menurut saya ada beberapa yang berkualitas rendah.

Layanan Hosting Font

Industri hosting font telah tumbuh dengan pesat selama beberapa tahun terakhir. Font hosting memungkinkan Anda untuk melisensikan beberapa font favorit Anda - dan dalam banyak kasus, kualitasnya lebih baik daripada font gratis - untuk digunakan di web. Typekit adalah salah satu pemain besar pertama di pasar ini dan memiliki pilihan font yang sangat bagus. Seiring waktu, mereka telah menambahkan beberapa fon yang lebih terkenal seperti Futura dan Meta dan telah membuat beberapa font yang dikenal di dunia web.

Fonts.com menawarkan lisensi untuk pustaka lebih dari 150.000 font yang berisi beberapa font paling populer di dunia seperti Avenir, Frutiger, Univers, dan Din untuk beberapa nama. Layanan ini memiliki beberapa fitur unik yang sangat saya sukai: Bergantung pada tingkat keanggotaan yang Anda miliki, itu mengintegrasikan SkyFonts yang pada dasarnya memungkinkan Anda untuk "menyewa" font untuk jangka waktu tertentu, paling sering dalam satu atau tiga puluh hari bertahap. Ini memungkinkan Anda untuk menggunakan font di aplikasi desktop untuk tujuan mockup. Selain itu, dengan keanggotaan premium, Anda dapat mengunduh perangkat font dan self-host font Anda sendiri, meningkatkan waktu pemuatan.

Salah satu layanan baru yang menyebabkan keributan baru-baru ini adalah peluncuran tipografi awan HF & J. HF & J secara luas dianggap sebagai otoritas tipografi dan font mereka sesuai dengan reputasi tersebut. Penawaran web dari orang-orang ini telah lama ditunggu karena mereka mendesain ulang masing-masing font untuk tampilan mereka. Mereka cukup banyak menaikkan standar, membuat 9pt. Gotham bisa dibaca di layar. Sungguh menakjubkan.

This scaled screenshot obviously doesn't do it justice..This scaled screenshot obviously doesn't do it justice..This scaled screenshot obviously doesn't do it justice..
Screenshot skala ini jelas tidak melakukannya keadilan ..

Mereka memiliki interface yang bagus yang dikemas dengan fitur-fitur berani, seperti memilih hanya karakter dalam font yang Anda butuhkan, yang pada gilirannya menghemat ruang dan meningkatkan waktu loadnya. Pasti layak untuk dicoba.

Kalkulasi harga

Struktur harga untuk layanan hosting font bervariasi, tetapi sebagian besar didasarkan pada tampilan halaman untuk setiap situs yang Anda gunakan pada font mereka. Selain ini, banyak layanan fonts.com memiliki tingkatan harga yang berbeda yang menawarkan gaya yang berbeda seperti fonts dekstop, mock up, dan pilihan hosting sendiri. Sebaiknya lihat apa saja yang tersedia dan pilih layanan dan rencana yang sesuai dengan kebutuhan Anda.


Font yang ada vs. Hosting Sendiri

Jadi, apakah lebih baik menggunakan layanan hosting font atau hosting sendiri? Yah, itu tergantung. Berikut beberapa kelebihan masing-masing:

Layanan Hosting (seperti TypeKit, Fonts.com, HF & J)

  1. Lebih banyak pilihan font berkualitas tinggi.
  2. Mudah di install
  3. Sangat mudah untuk mengubah tipografi seiring dengan berkembangnya desain.
  4. Merujuk font pada server pihak ketiga berarti menyebarkan permintaan http, yang pada akhirnya meningkatkan kinerja.
  5. File dari pihak ketiga dapat (mungkin) sudah di-cache oleh pengguna.

Self Hosting

  1. Perenderan huruf yang lebih cepat (sebagian besar waktu - ini telah sangat meningkat).
  2. Tidak ada ketergantungan pada waktu layanan provider.
  3. Tidak ada biaya berlangganan atau batasan tampilan halaman.
  4. Tidak ada ketergantungan JavaScript untuk pengiriman font.

Perlu dicatat bahwa Anda perlu menyadari berapa banyak font yang Anda gunakan. Saat menyangkut kinerja, beberapa bobot dengan font yang sama berarti Anda memuat seluruh font lain,jadi hati-hati karena semakin banyak font yang Anda gunakan, semakin lama waktu loadnya. Anda akan menyetel beberapa alarm di TypeKit setelah perangkat Anda lebih dari 500k, tetapi kurang lebih dalam hal ini.


Itu saja.

Bagus sekali, Anda sekarang dididik tentang dasar-dasar @font-face dan banyak cara yang dapat digunakan! Pastikan untuk mengikuti alat dan metode baru mengintegrasikan font di web-seperti dengan apa pun di web, itu berubah cepat!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.