Buat paket font web
Pilih font TTF, OTF, WOFF, atau WOFF2 untuk membuat file WOFF2, CSS, dan pratinjau HTML. Sebelum mengintegrasikannya ke situs web, periksa contoh teks serta nama, bobot, gaya, dan tampilan saat memuat pada CSS, lalu simpan paketnya sebagai ZIP. Pembatasan himpunan karakter tidak dilakukan.
Yang dapat Anda lakukan
Siapkan berkas untuk web
Buat WOFF2, CSS, dan pratinjau HTML dari TTF, OTF, WOFF, atau WOFF2. Anda dapat memilih beberapa font sekaligus.
Periksa glif dan pengaturan CSS
Periksa tampilan font hasil konversi. Anda dapat mengubah nama, bobot, dan gaya yang dipakai di web serta tampilan saat pemuatan sesuai kebutuhan.
Bagikan set tersebut sebagai ZIP
Simpan folder fonts, fonts.css, dan preview.html sebagai satu set. Gunakan dengan mempertahankan posisi relatifnya.
Cara menggunakan
Pilih beberapa font sekaligus
Pilih font yang bisa Anda pakai di web. Jika memakai beberapa font, pilih sekaligus.
Periksa tampilan dan pengaturan web
Masukkan teks untuk dipratinjau dan periksa setiap font. Untuk menyesuaikan nama, bobot, atau opsi lainnya, buka pengaturan CSS font tersebut.
Buat paketnya dan simpan ZIP
Klik “Buat paket web font”, lalu simpan webfont-kit.zip yang dihasilkan.
Ekstrak dan tambahkan ke halaman web
Ekstrak berkas sambil mempertahankan posisi folder fonts, fonts.css, dan preview.html. Muat CSS di halaman tempat font akan dipakai dan gunakan nama font yang ditentukan.
Berguna ketika
Siapkan situs web untuk dipublikasikan
Siapkan font Anda dalam format web dan CSS untuk menyiapkan berkas yang dibutuhkan saat integrasi.
Serahkan set lengkapnya ke tim produksi
Siapkan beberapa font, seperti reguler dan tebal, lalu serahkan bersama HTML berisi teks untuk memeriksanya.
Cara font dan CSS bekerja bersama
WOFF2 adalah format font untuk web
Siapkan WOFF2 yang memuat karakter asli. Karakter tidak dijadikan subset. Ukuran berkas berbeda-beda menurut font.
Daftarkan nama, bobot, dan gaya di CSS
Pengaturan ini menentukan gaya yang diminta memakai font ini di web. Pengaturan ini tidak mengubah glif font menjadi tebal atau miring.
Bedakan nama yang sama dengan bobot dan gaya
Gaya reguler dan tebal dapat memakai nama yang sama, tetapi kombinasi nama, bobot, dan gaya tidak boleh diduplikasi.
Pilih tampilan saat pemuatan
Secara bawaan, font cadangan ditampilkan lebih dulu lalu beralih saat font siap. Jika perlu, Anda dapat mengubah perilaku menunggu dan beralih di pengaturan CSS.
Pertahankan posisi relatif berkas
fonts.css merujuk berkas seperti fonts/font-1.woff2. Jika Anda memindahkan folder atau CSS, sesuaikan jalur rujukannya.
Pertanyaan yang sering diajukan
Ke mana saya harus menempatkan berkas hasil pembuatan?
Ekstrak ZIP, lalu tempatkan folder fonts, fonts.css, dan preview.html dengan mempertahankan posisi relatifnya. Muat fonts.css dari halaman Anda dan gunakan nama font yang ditentukan di CSS.
Apa bedanya dari konversi format saja?
Layar ini menggabungkan WOFF2 dengan CSS dan pratinjau HTML. Jika hanya ingin mengubah format font, gunakan “Pengonversi format font”.
Bisakah saya mempertahankan hanya karakter yang saya gunakan?
Layar ini tidak membuat subset karakter. Layar ini menyiapkan font yang mempertahankan karakter aslinya.
Apakah mengubah bobot membuat karakter menjadi lebih tebal?
Pengaturan ini menentukan nilai bobot yang digunakan di CSS. Pengaturan ini tidak mengubah glif di dalam berkas font. Untuk memakai tebal atau miring, sediakan berkas yang berisi glif tersebut.
Bisakah saya memakai beberapa berkas dengan nama font yang sama?
Anda dapat mendaftarkan berkas dengan bobot atau gaya berbeda. Jika kombinasi nama, bobot, dan gaya yang sama terduplikasi, periksa pengaturan terkait.
Apa yang terjadi jika saya memilih font lagi?
Set font saat ini dan ZIP yang dihasilkan dihapus, lalu set yang baru dipilih dimuat. Pilih berkas apa pun yang ingin Anda lanjutkan pemakaiannya bersama yang baru.
Bagaimana jika tidak semua karakter contoh ditampilkan?
Karakter yang tidak ada dalam font mungkin ditampilkan dengan font lain. Periksa karakter yang didukung dan tampilannya di tempat font akan dipakai.
Bagaimana jika font tidak dapat dimuat?
Pilih font dalam format yang didukung. Jika ada berkas dalam set yang tidak dapat dikonversi atau dimuat, set yang hanya berhasil sebagian tidak disimpan.
Input dan hasil
- Input
- TTF, OTF, WOFF, dan WOFF2. Anda dapat memilih beberapa berkas sekaligus.
- Ketentuan
- Periksa ketentuan penggunaan font input, termasuk penyisipan font di web.
- Pengaturan
- Nama, bobot, gaya, dan tampilan saat pemuatan yang digunakan di CSS.
- Keluaran
- webfont-kit.zip. Berisi WOFF2, fonts.css, dan preview.html.