Dokumen ini bertujuan untuk membantu pengguna domestik yang belajar Framer dan mengalami kesulitan karena kurangnya materi dalam Bahasa Indonesia, dengan menerjemahkan konten blog resmi ke Bahasa Indonesia dan menambahkan informasi praktis yang bermanfaat. Kami berharap ini dapat bermanfaat bagi Anda yang menggunakan Framer.

Semua situs yang dibuat di Framer menggunakan web font atau font kustom, yang harus dimuat sebelum dirender oleh browser. Framer menerapkan berbagai metode optimasi untuk meningkatkan kecepatan render teks.

Tips Optimasi Font

• Gunakan ketebalan web font dari Light(300) hingga Bold(700).
  Teks dalam rentang ini tidak akan tersembunyi selama memuat berkat aturan font-display: swap.

• Disarankan untuk menggunakan Google Fonts.
  Google Fonts mendukung subsetting otomatis sehingga memuat lebih cepat.
  Sebaiknya pilih melalui tab “Web” dan bukan melalui upload langsung.

Jenis Font yang Didukung

Google Fonts: Dapat dipilih dari tab “Web” dan tersedia di fonts.google.com.
Fontshare Fonts: Dapat dipilih dari tab “Web” dan tersedia di fontshare.com.
Font yang diunggah pengguna: Font yang diunggah langsung oleh pengguna dapat diakses dari tab Font Kustom.
Inter standar: Font yang diterapkan secara default ke blok teks baru, mendukung italik tidak seperti versi Google Fonts.

Setiap jenis font memiliki metode optimasi yang berbeda berdasarkan asal dan cara penggunaannya.

Font-display: swap

Aturan CSS ini menampilkan font sistem sampai web font dimuat, mengurangi waktu loading yang dirasakan pengguna.

Penerapan: Google Fonts dan Fontshare Fonts (Serif/Sans-serif, ketebalan Light~Bold), Font Kustom (semua ketebalan dan gaya), Inter Standar (ketebalan Light~Bold)

Perhatian

• Ketebalan khusus seperti Thin(100) tidak diterapkan karena sangat berbeda dengan font sistem.

• Font dekoratif atau dari jenis non-sans-serif tidak diterapkan untuk menghindari ketidaksesuaian dengan font pengganti (seperti Arial).

Framer menghitung dan menerapkan aturan CSS seperti size-adjust agar font sistem terlihat semirip mungkin dengan font aktual pada font yang diatur menggunakan font-display: swap, sehingga mengurangi perubahan tata letak saat web font dimuat.

Subsetting Font

Banyak font mendukung alfabet latin, kiril, Yunani, dan lainnya. Namun, jika situs hanya menggunakan satu bahasa, tidak perlu mengunduh semua set karakter yang tidak dibutuhkan.

Penerapan: Google Fonts, Inter Standar

Metode Optimasi

• Google Fonts menangani subsetting secara otomatis.

• Framer melakukan subsetting pada font Inter Standar dengan cara yang sama seperti Google Fonts.

• Browser memuat hanya subset yang diperlukan berdasarkan karakter yang digunakan dalam halaman, mengurangi ukuran file font. Kompresi font WOFF2

Kompresi Font WOFF2

WOFF2 adalah format kompresi font terbaru dan paling efisien, dengan ukuran yang jauh lebih kecil dari TTF atau OTF.

Penerapan: Google Fonts, Fontshare Fonts, Font Kustom yang diunggah setelah November 2023, Inter Standar

Detail

• Font Kustom yang diunggah sebelum November 2023 mempertahankan format yang ada.

• Untuk upgrade, unggah file .woff2 bersamaan dengan font yang ada. Framer kemudian akan otomatis menggunakan versi WOFF2.

• Konversi otomatis tidak diterapkan untuk mencegah masalah yang dapat mempengaruhi desain situs.

Berkat optimasi seperti ini, semua situs yang dibuat dengan Framer mendapatkan pemuatan font yang lebih cepat dan kinerja yang stabil. Manfaatkan Google Fonts secara maksimal, dan pilih ketebalan dan format kompresi yang tepat untuk meningkatkan pengalaman teks di situs web Anda.

Artikel ini adalah konten terjemahan dan adaptasi dari blog resmi Framer ‘How fonts are optimized in Framer’.