From d6832b6f62343a07628e284916c2c2e6f492423a Mon Sep 17 00:00:00 2001
From: smastrom <smastrom@proton.me>
Date: Sun, 1 Sep 2024 22:25:57 +0200
Subject: [PATCH] Demo - Preload fonts

---
 playground/app.vue          | 10 ++++++++++
 playground/assets/style.css |  7 +++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/playground/app.vue b/playground/app.vue
index a2bde54..f3ca66b 100644
--- 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
index 8d3c45e..2a22aed 100644
--- a/playground/assets/style.css
+++ b/playground/assets/style.css
@@ -1,5 +1,4 @@
 @font-face {
-   font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
@@ -7,26 +6,26 @@
 }
 
 @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 {