Demo - Preload fonts

smastrom · Sep 1, 2024 · d6832b6 · d6832b6
1 parent a397aef
commit d6832b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/playground/app.vue b/playground/app.vue
@@ -13,6 +13,16 @@ import SimpleNotification, {
    type SimpleNotificationProps,
 } from '@/components/custom-notifications/SimpleNotification.vue'
 
+useServerHead({
+   link: ['regular', '700'].map((w) => ({
+      rel: 'preload',
+      href: `pt-sans-narrow-v17-latin-${w}.woff2`,
+      as: 'font',
+      type: 'font/woff2',
+      crossorigin: '',
+   })),
+})
+
 const { state } = useStore()
 const config = useNotivue()
 

diff --git a/playground/assets/style.css b/playground/assets/style.css
@@ -1,32 +1,31 @@
 @font-face {
-   font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('inter-v13-latin-500.woff2') format('woff2');
 }
 
 @font-face {
-   font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('inter-v13-latin-700.woff2') format('woff2');
 }
+
 @font-face {
-   font-display: swap;
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 400;
    src: url('pt-sans-narrow-v17-latin-regular.woff2') format('woff2');
+   font-display: block;
 }
 
 @font-face {
-   font-display: swap;
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 700;
    src: url('pt-sans-narrow-v17-latin-700.woff2') format('woff2');
+   font-display: block;
 }
 
 :root {