Desain
7 Jul 2025
Cara Mengunggah dan Menggunakan Font Kustom di Framer
Dengan mengunggah font kustom di Framer, Anda dapat menggunakan font unik merek Anda, meningkatkan kinerja dengan font web yang dioptimalkan, dan mengatasi masalah penerapan font pada teks yang diimpor dari Figma.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Mengapa Menggunakan Font Kustom?
Framer pada dasarnya menyediakan berbagai web font dan integrasi dengan Google dan Fontshare. Namun, jika Anda perlu menggunakan font khusus merek atau yang Anda buat sendiri, Anda harus mengunggahnya ke tab ‘Custom’.
Langkah Unggah & Terapkan
Tambahkan layer teks ke proyek
Buka pemilih font di panel properti kanan
Klik tab
CustomTekan tombol
UploadPilih file
.woff2,.woff,.ttf,.otfdari lokalSetelah diunggah, font akan ditambahkan ke tab ‘Custom’
Pilih font tersebut untuk langsung menerapkannya ke teks
Catatan: Format .woff2 adalah yang terbaik untuk pengoptimalan web. Ukuran file lebih kecil dan waktu muat lebih cepat.
Tip Penerapan Font Kustom dari Figma
Ketika Anda mengimpor teks dari Figma ke FramerFramer, ada kemungkinan font kustom digantikan dengan font default.
Jika demikian, Anda harus mengunggah kembali font kustom di proyek FramerFramer Anda dan memilih teks untuk menerapkannya kembali.
Optimisasi Kinerja & Lisensi
Kinerja Font: Saat menggunakan file
.woff2, FramerFramer secara otomatis menyediakan fungsi optimisasi (kompresi, subsetting, font-display: swap).Lisensi Font: Untuk situs web, Anda membutuhkan lisensi
Webfont(WOFF/WOFF2). Lebih cepat dan lebih kompatibel dibandingkan untuk desktop (TTF/OTF).
Tip Memecahkan Masalah Setelah Mengunggah Font
Jika varian (berat) tidak terlihat: Periksa apakah hanya file
.woff2yang diunggah.Jika font family/style tidak dikenali: Pastikan nama font (metadata) sesuai dengan nama sebenarnya dan bahwa beberapa gaya tergabung dalam satu keluarga. (Sunting di Glyphs dan lainnya)
Di Mana Fungsi Ini Diperlukan?
Misalnya, pada halaman atau situs merek perusahaan profesional, gaya font sangat penting, dan mungkin Anda perlu menerapkan font yang dibuat atau dibeli sendiri. Dalam kasus tersebut, kita dapat menggunakan 'pengunggahan font kustom' untuk menggunakan berbagai font secara bebas di FramerFramer.
Tulisan ini adalah konten terjemahan dan adaptasi dari posting blog resmi Framer, ‘Adding custom fonts’.
