@font-face adalah aturan CSS yang memungkinkan font untuk ditampilkan di halaman web di internet. Sebelum ada aturan ini, webmaster dapat menggunakan sekumpulan font yang terbatas di situs mereka, yang paling umum dan terinstal di komputer pengguna. Dengan munculnya @font-face, font tertentu dapat dengan mudah dilampirkan ke situs web.
Jika Anda mengunduh font di situs kami, dalam arsip dengan font Anda akan menemukan kode CSS siap pakai yang harus disalin dan dimasukkan ke dalam dokumen CSS yang dilampirkan ke proyek.
Instalasi langkah demi langkah
1. Pilih font yang Anda inginkan dan klik "unduh untuk situs web".
2. Di root situs Anda, buat folder font, dan salin font yang diunduh.
Buka dokumen CSS Anda dan salin konten file teks dari arsip ke dalamnya.
4. Pastikan jalur ke folder font dieja dengan benar. Bergantung pada posisi folder tempat font berada, jalur mungkin berisi satu atau lebih titik.
5. Selesai. Salin properti dengan nama keluarga dan tempelkan ke pemilih yang Anda gunakan untuk menulis gaya.
Bagaimana jika saya sudah mengunduh font di tempat lain dan saya ingin memasangnya?
Dalam hal ini, Anda perlu mencari konverter font di internet dan mengonversi font ttf (atau otf) Anda ke format yang tepat, yaitu eot, svg, woff, dan woff2. Hal ini untuk memastikan bahwa font ditampilkan dan berfungsi dengan benar di semua browser, serta di perangkat seluler.
Anda kemudian harus mengeja sendiri aturan @font-face, dengan mematuhi sintaksnya.
Sintaks untuk @font-face
Sintaks aturan secara kasar dapat dibagi menjadi properti dasar dan properti lanjutan.
Dasar:
- font-family - menentukan nama font.
- src - menunjukkan jalur font. Ini mungkin URL font yang terletak di server situs web Anda, URL font yang terletak di server orang lain (seperti font Google), atau hanya nama font yang terletak di komputer pengguna (Helvetica New Bold, Tahoma, Georgia, dll.) .
Diperluas:
- font-display - menentukan bagaimana font akan muncul, tergantung pada apakah font tersebut telah diunduh dan siap digunakan.
- font-stretch - memungkinkan Anda menyesuaikan lebar teks.
- font-style - menentukan apakah font itu polos, miring atau miring (dua yang terakhir tidak sama).
- font-weight - Mengatur saturasi font, pada skala 100 hingga 900 (100-kecil, 900-kecil).
- font-variant - menentukan bagaimana huruf kecil harus disajikan - biarkan tanpa modifikasi atau buat semuanya menjadi huruf kecil (kapital).
- font-feature-settings - memungkinkan Anda untuk mengelola fitur tipografi tingkat lanjut dalam font OpenType.
- font-variations-settings - memungkinkan kontrol tingkat rendah atas variasi font Open Type dan TrueType dengan menentukan nama sumbu empat huruf.
- unicode-range - menentukan rentang kode Unicode (mesin terbang) yang akan digunakan dalam font.
Menghubungkan font ke situs Anda dengan Google Fonts
Menggunakan Google Font adalah cara termudah untuk menghubungkan font ke situs web Anda. Buka situs web mereka, temukan font yang Anda inginkan, pilih font yang tepat untuk dipasang dan salin kodenya.
Kode yang disalin harus ditempatkan di dalam tubuh tag head, pada halaman html Anda.
Kerugian dari metode ini adalah jika selama pembuatan situs Anda kehilangan internet - font tidak akan ditampilkan dan diganti dengan yang standar karena file tidak terletak di komputer lokal, dan di server Google. Selain itu, kemungkinan besar ketika Anda datang ke klien untuk presentasi tata letak (atau hanya untuk penyesuaian) dan dia tidak memiliki Wi-Fi, masalahnya akan terjadi lagi.
