diff --git a/index.html b/index.html
index ab946e6..7ea50f7 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,13 @@
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
+    <link
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      href="/src/assets/fonts/Inter/Inter-Variable.woff2"
+      crossorigin
+    >
     <link rel="preload" as="image" href="/bg-galaxy.svg" fetchpriority="high">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SWAPI Planets</title>
diff --git a/src/assets/fonts/Inter/Inter-Variable.ttf b/src/assets/fonts/Inter/Inter-Variable.ttf
deleted file mode 100644
index 969a990..0000000
Binary files a/src/assets/fonts/Inter/Inter-Variable.ttf and /dev/null differ
diff --git a/src/assets/fonts/Inter/Inter-Variable.woff2 b/src/assets/fonts/Inter/Inter-Variable.woff2
new file mode 100644
index 0000000..d15208d
Binary files /dev/null and b/src/assets/fonts/Inter/Inter-Variable.woff2 differ
diff --git a/src/assets/main.css b/src/assets/main.css
index 07f9481..51fe3d6 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -6,7 +6,10 @@
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
-  src: url('./fonts/Inter/Inter-Variable.ttf') format('truetype');
+  src: url('./fonts/Inter/Inter-Variable.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @theme {
diff --git a/src/views/PlanetsView.vue b/src/views/PlanetsView.vue
index 0620085..56665cc 100644
--- a/src/views/PlanetsView.vue
+++ b/src/views/PlanetsView.vue
@@ -7,7 +7,7 @@ import PlanetMap from '@/components/PlanetMap.vue'
 import PlanetsList from '@/components/PlanetsList.vue'
 import StatusMessage from '@/components/StatusMessage.vue'
 import Toolbar from '@/components/Toolbar.vue'
-import { usePlanetsStore } from '@/stores/planets'
+import { PAGE_SIZE, usePlanetsStore } from '@/stores/planets'
 import { getListStatusMessage } from '@/utils/listStatusMessage'
 
 const planetsStore = usePlanetsStore()
@@ -72,8 +72,11 @@ onMounted(() => {
       />
     </section>
 
+    <!-- Reserve one page of list height during loading to cut Cumulative Layout Shift (CLS)
+         when rows mount. 2.25rem is the row height; 1rem is `gap-4` so the box is not short on mobile. -->
     <section
       class="flex flex-1 flex-col gap-6 px-6 pb-6 lg:col-start-2 lg:row-start-2 lg:px-10 lg:pr-16 xl:pr-32"
+      :style="{ minHeight: `calc(${PAGE_SIZE} * 2.25rem + ${PAGE_SIZE - 1} * 1rem)` }"
     >
       <p v-if="listLoading" class="mt-10 text-sm text-muted">Loading planets…</p>