Menambahkan Font di VueJS

April 5, 2021 5 min read
Font adalah salah satu aspek penting untuk kenyamanan dan pengalaman pengguna, pelajari bagaimana cara menambahkan font external di VueJS.

Menambahkan font bisa berefek bagus untuk user experience, tampilan visual, dan performa website. Namun jika proses penambahannya salah, justru bisa berpengaruh pada performa web.

Berikut ini cara terbaik untuk menambahkan font di VueJS.

Faktor penting dalam menggunakan font

Sebelum beranjak ke tutorial menambahkan font ke dalam project VueJS, ada baiknya kita mengenal terlebih dahulu faktor-faktor penting dalam penggunaan font, agar tidak mengganggu performa website kita.

Pastikan deklarasi font-face sudah benar

Font-face adalah salah satu atribut penting untuk memuat font di suatu website. Pastikan fon-face sudah dideklarasikan secara benar. Agar tidak terjadi masalah saat memuat font.

Contohnya kita memiliki font khusus yang kita letakkan di folder fonts pada direktori utama.

/root
  public/
    fonts/
      Roboto/
        Roboto-Regular.woff2
        Roboto-Regular.woff
    index.html
  src/
    assets/
      main.css
    components/
    router/
    store/
    views/
    main.js

Kita bisa membuat deklarasi font-face di main.css seperti ini.

@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: normal;
  font-display: auto;
  unicode-range: U+000-5FF;
  src: local("Roboto"), url("/fonts/Roboto/Roboto-Regular.woff2") format("woff2"), url("/fonts/Roboto/Roboto-Regular.woff") format("woff");
}

Hal penting yang perlu diperhatikan ada pada bagian font-display: auto. Dengan menggunakan auto akan memungkinkan browser menggunakan cara yang paling tepat untuk menampilkan font. Ini bergantung pada beberapa faktor seperti kecepatan jaringan, jenis perangkat, waktu idle, dan banyak lagi.

Sementara itu, menurut referensi PageSpeed Insight, direkomendasikan untuk menggunakan font-display: swap. Ini memungkinkan browser untuk menggunakan font fallback untuk menampilkan teks sementara sampai font kustom diunduh sepenuhnya. Value lain bisa kita baca di font-display.

unicode-range: U+000-5FF berfungsi untuk menginstruksikan browser agar menentukan rentang karakter yang didukung oleh font-face.

Dengan kata lain, jika kita mendeklarasikan unicode-range pada @font-face dan karakter yang dimuat dalam dokumen HTML cocok dengan rentang karakter itu, maka font akan diunduh dan digunakan. Dokumentasi dekriptor ini bisa dibaca di halaman unicode-range.

Hal lain yang perlu dipehatikan adalah bagian scr, pertama kita memeriksa apakah font tersedia di device, src: local("Roboto").

Banyak perangkat Android yang sudah dilengkapi dengan font Roboto, dalam hal ini, font lokal yang sudah diinstal sebelumnya akan digunakan.

Jika font lokal tidak tersedia, maka akan melanjutkan mengunduh format woff2 jika didukung oleh browser.

Preload font

Tag font dalam HTML pada umumnya seperti berikut.

<link rel="preload" as="font" href="./fonts/Roboto/Roboto-Regular.woff2" type="font/woff2" crossorigin="anonymous">

rel = "preload" memerintahkan browser untuk mulai mengambil font secepat mungkin. Sementara as = "font" memberi tahu browser bahwa ini adalah font sehingga memprioritaskan permintaan.

Menggunakan preload meningkatkan kemungkinan agar font khusus diunduh sebelum dibutuhkan. Perubahan kecil ini bisa mempercepat waktu muat font dan rendering teks di aplikasi web kita.

Gunakan preconnect untuk font yang dihosting

Saat menggunakan font yang dihosting dari situs seperti Google font, kita bisa mempercepat waktu loading dengan menggunakan preconnect. Ini akan memberitahu browser untuk membuat koneksi ke domain sebelum mengunduh font.

Misalnya, jika kita menggunakan font Roboto yang dihosting di Google Font, tag nya seperti berikut

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Ini akan membuat koneksi awal ke asal font, yaitu di https://fonts.gstatic.com, dan pada saat browser membutuhkan fontnya, koneksi sudah dibuat sebelumnya.

Menambahkan font di VueJS

Berikut ini cara menambahkan font di pada Progressive Web Application (PWA) VueJS.

Cache font dengan service worker

Font adalah sumber daya statis yang tidak banyak berubah sehingga sangat cocok disimpanan dalam cache.

Idealnya, server web harus menetapkan max-age expires header yang lebih lama pada font sehingga browser bisa menyimpannya lebih lama. Baca dokumentasinya di halaman Cache-Control.

Jika kita membuat aplikasi web progresif (PWA), kita bisa menggunakan service worker untuk menyimpan font dan menyajikannya langsung dari cache.

Untuk mulai membuat PWA dengan Vue, gunakan tool vue-cli untuk membuat proyek baru

vue create pwa-app

Pilih opsi fitur secara manual dan kemudian pilih Dukungan Aplikasi Web Progresif (PWA)

Project VueJS PWA

Setelah selesai, kita bisa masuk ke directory project cd pwa-app, dan jalankan perintah yarn serve.

Kita akan melihat file registerServiceWorker di direktori src yang berisi konfigurasi default. Selanjutnya, pada file vue.config.js tambahkan baris berikut.

module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    }
  }
}

Selanjutnya, tambahkan font khusus ke folder public. Perhatikan struktur folder berikut

root/
  public/
    index.html
    fonts/
      Roboto/
        Roboto-Regular.woff
        Roboto-Regular.woff2

Setekah selesai melakukan edit dan pengembangan project, jalankan perintah yarn build pada terminal.

Hasil render akan di simpan di dalam folder dist. Jika kita memeriksa isi folder tersebut, kita akan melihat file yang namanya kurang lebih seperti precache-manifest.1234567890.js.

File ini berisi daftar aset yang disimpan dalam cache. Misalnya seperti berikut.

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "3628b4ee5b153071e725",
    "url": "/fonts/Roboto/Roboto-Regular.woff2"
  },
  ...
]);

Semua yang ada di folder public akan disimpan dalam cache, termasuk font yang kita tambahkan tadi.

Pada saat kita mengunjunginya kesekian kali, font dimuat dari cache sehingga waktu loading aplikasi lebih cepat.

Dengan begitu, performa dan kinerja aplikasi web kita akan tetap optimal tanpa terganggu masalah loading yang lama atau lainnya.

Referensi


Terima kasih sudah membaca artikel "Menambahkan Font di VueJS"
Silahkan Login untuk berkomentar.