Latihan 1: Font Loading Strategies — Performance

Latihan 1 dari materi Font Loading Strategies di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Halaman blog di kode awal sudah punya <title>Blog Post</title> dan <h1>Hello World</h1>, biarkan begitu. Ganti komentar TODO di dalam <head> dengan tiga hal ini, berurutan:

  1. Preload file font-nya: <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>.
  2. Tepat di bawahnya, sebuah <style> berisi @font-face untuk "Inter" dengan src: url("/fonts/inter.woff2") format("woff2"); dan font-display: swap;. font-display harus di dalam blok @font-face itu, bukan di body.
  3. Di <style> yang sama, beri body font-family: "Inter", system-ui, sans-serif; supaya ada cadangan font bawaan sistem.

Yang dinilai: ada <link rel="preload" as="font"> yang punya atribut crossorigin, ada @font-face yang di dalamnya font-display: swap, ada deklarasi font-family yang menyebut system-ui, preload-nya menyebut type="font/woff2", dan path /fonts/inter.woff2 ditulis sama persis di href preload dan di url() di @font-face sesudahnya. Komentar gak ikut dibaca, jadi tulis semuanya sebagai kode sungguhan.

Hint