Optimasi Ukuran Pengiriman Web Font

• Analisis Pengiriman Web Font Instan: Analisis deklarasi CSS @font-face seketika di browser Anda — tanpa unggahan ke server, tanpa pemrosesan cloud. Optimasi kami mendeteksi WOFF2 yang hilang, format lama, dan masalah font-display secara real time.
• Optimasi Pengiriman Web Font Online yang Aman: Kode CSS Anda tidak pernah meninggalkan perangkat saat dianalisis. Pemrosesan 100% di sisi klien berarti privasi penuh — tanpa penyimpanan cloud, log server, atau paparan URL font.
• Optimasi Pengiriman Web Font - Tanpa Instalasi: Analisis dan optimalkan deklarasi @font-face langsung di browser tanpa unduhan perangkat lunak, plugin, dan akun. Berfungsi di browser modern apa pun pada sistem operasi apa pun.
• Output CSS Teroptimasi dengan Satu Klik: Optimasi menghasilkan blok CSS @font-face yang bersih — format EOT dan SVG dihapus, font-display ditambahkan, fallback local() ditambahkan — siap disalin atau diunduh sebagai file .css.

• Optimasi Font untuk Core Web Vitals: Analisis deklarasi @font-face untuk memperbaiki masalah LCP dan CLS terkait font. font-display: swap yang hilang menyebabkan teks tak terlihat (FOIT) yang menunda LCP; optimasi mendeteksi dan memperbaikinya otomatis.
• Modernisasi Tumpukan Font Lama: Modernkan tumpukan @font-face lama yang menyertakan format EOT, SVG, dan TTF. Optimasi menghapus format usang, memastikan WOFF2 berada di urutan pertama daftar src, dan menghasilkan CSS modern yang bersih.
• Audit Font Design System: Audit deklarasi @font-face di design system atau pustaka komponen Anda. Optimasi mengidentifikasi WOFF2 yang hilang, nilai font-display yang tidak konsisten, dan peluang beralih ke font variabel.
• Hosting Mandiri Font yang Patuh GDPR: Deteksi URL CDN Google Fonts dalam deklarasi @font-face yang bisa melanggar GDPR dengan mengirim IP pengguna ke Google. Optimasi menandainya dan merekomendasikan alternatif hosting mandiri.
• Pengiriman Font Multibahasa: Analisis deklarasi unicode-range untuk tumpukan font multibahasa. Optimasi mendeteksi properti unicode-range yang hilang yang membuat semua subset font diunduh bahkan pada halaman satu bahasa.
• Perencanaan Migrasi Font Variabel: Identifikasi keluarga font dengan 4 atau lebih deklarasi ketebalan yang akan diuntungkan beralih ke font variabel. Optimasi menandainya dan merekomendasikan pendekatan font variabel untuk mengurangi permintaan HTTP.

Optimasi pengiriman web font adalah proses mengonfigurasi deklarasi CSS @font-face untuk meminimalkan ukuran unduhan font, mengurangi permintaan HTTP, dan mencegah render-blocking. Faktor kuncinya: pemilihan format (WOFF2 30-50% lebih kecil daripada WOFF), font-display (mencegah teks tak terlihat selama pemuatan font), unicode-range (memungkinkan subsetting per aksara), dan fallback local() (memakai font sistem bila tersedia). Optimasi ukuran pengiriman web font kami mengurai CSS @font-face Anda, mendeteksi semua masalah ini, dan menghasilkan CSS yang dioptimalkan.

1. 1 Tempel CSS @font-face Anda: Tempel CSS apa pun yang berisi deklarasi @font-face — dari stylesheet Anda, embed Google Fonts, atau penyedia font. Semua analisis terjadi lokal di browser — CSS dan URL font tidak pernah meninggalkan perangkat Anda.
2. 2 Klik "Analisis Pengiriman Font": Optimasi mengurai setiap blok @font-face, mengekstrak font-family, font-weight, font-style, font-display, unicode-range, dan semua entri src. Alat ini mendeteksi WOFF2 yang hilang, format lama (EOT, SVG), font-display yang tidak ada, dan masalah GDPR.
3. 3 Tinjau rekomendasi dan unduh CSS teroptimasi: Hasilnya menampilkan lencana format per deklarasi, rekomendasi optimasi beserta perbaikannya, dan CSS yang sudah dibersihkan — EOT/SVG dihapus, font-display ditambahkan, fallback local() ditambahkan — siap disalin atau diunduh.

• Format WOFF2: WOFF2 memakai kompresi Brotli dan 30-50% lebih kecil daripada WOFF. Format ini didukung semua browser modern (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). Selalu pakai WOFF2 sebagai entri src pertama.
• Properti font-display: Mengatur cara browser menangani pemuatan font. swap langsung menampilkan teks fallback (terbaik untuk teks isi); optional hanya memakai font jika termuat dalam 100 ms (terbaik untuk font non-kritis).
• Format Lama (EOT, SVG): EOT hanya dibutuhkan untuk IE8 dan versi lebih lama (kurang dari 0,1% pangsa pasar). Font SVG sudah usang. Menghapusnya mengurangi kompleksitas CSS dan menghilangkan permintaan HTTP yang tidak perlu pada browser lama.
• unicode-range: Memungkinkan subsetting font per aksara — browser hanya mengunduh file font untuk aksara yang benar-benar dipakai di halaman. Krusial untuk situs multibahasa dengan keluarga CJK besar atau multi-aksara.

Optimasi ukuran pengiriman web font hanya menganalisis deklarasi CSS — alat ini tidak mengunduh atau mengukur ukuran file font sebenarnya. Ukuran perkiraan didasarkan pada nilai tipikal setiap format (WOFF2 ~18 KB, WOFF ~28 KB, TTF ~45 KB untuk subset Latin). Ukuran sebenarnya bergantung pada jumlah glif, fitur OpenType, dan subsetting. Optimasi tidak dapat mendeteksi apakah file WOFF2 benar-benar tersedia di URL yang ditentukan — verifikasi URL di tab Network browser Anda.