Merged in feat/sw-2998-font-optimization (pull request #2323)

feat(SW-2998) - Optimize font loading * feat(SW-2998) - Optimize font loading * display swap on fonts Approved-by: Anton Gunnarsson
2025-06-10 12:21:55 +00:00
parent 8ddcc39192
commit 9eb15e232b
5 changed files with 83 additions and 44 deletions
--- a/apps/scandic-web/app/[lang]/(live)/layout.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/layout.tsx
@@ -21,6 +21,7 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
 import RouterTracking from "@/components/TrackingSDK/RouterTracking"
+import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
@@ -34,12 +35,9 @@ export default async function RootLayout(
    }
  >
 ) {
-  const params = await props.params;
+  const params = await props.params

-  const {
-    bookingwidget,
-    children
-  } = props;
+  const { bookingwidget, children } = props

  setLang(params.lang)
  const messages = await getMessages(params.lang)
@@ -47,6 +45,7 @@ export default async function RootLayout(
  return (
    <html lang={params.lang}>
      <head>
+        <FontPreload />
        <AdobeSDKScript />
        <GTMScript />
        <Script
@@ -56,6 +55,7 @@ export default async function RootLayout(
          data-culture={params.lang}
          id="Cookiebot"
          src="https://consent.cookiebot.com/uc.js"
+          async={true}
        />
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        <Script id="ensure-adobeDataLayer">{`
--- a/apps/scandic-web/app/[lang]/(partner)/layout.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/layout.tsx
@@ -17,18 +17,19 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
 import RouterTracking from "@/components/TrackingSDK/RouterTracking"
+import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"

 import type { LangParams, LayoutArgs } from "@/types/params"

-export default async function RootLayout(props: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  const params = await props.params;
+export default async function RootLayout(
+  props: React.PropsWithChildren<LayoutArgs<LangParams>>
+) {
+  const params = await props.params

-  const {
-    children
-  } = props;
+  const { children } = props

  if (!env.SAS_ENABLED) {
    return null
@@ -40,6 +41,7 @@ export default async function RootLayout(props: React.PropsWithChildren<LayoutAr
  return (
    <html lang={params.lang}>
      <head>
+        <FontPreload />
        <AdobeSDKScript />
        <GTMScript />
        <Script
@@ -49,6 +51,7 @@ export default async function RootLayout(props: React.PropsWithChildren<LayoutAr
          data-culture={params.lang}
          id="Cookiebot"
          src="https://consent.cookiebot.com/uc.js"
+          async={true}
        />
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        <Script id="ensure-adobeDataLayer">{`
--- a/apps/scandic-web/app/[lang]/webview/layout.tsx
+++ b/apps/scandic-web/app/[lang]/webview/layout.tsx
@@ -12,6 +12,7 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
 import RouterTracking from "@/components/TrackingSDK/RouterTracking"
+import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
@@ -26,12 +27,12 @@ export const metadata: Metadata = {
  title: "Webview",
 }

-export default async function RootLayout(props: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  const params = await props.params;
+export default async function RootLayout(
+  props: React.PropsWithChildren<LayoutArgs<LangParams>>
+) {
+  const params = await props.params

-  const {
-    children
-  } = props;
+  const { children } = props

  setLang(params.lang)
  const messages = await getMessages(params.lang)
@@ -39,6 +40,7 @@ export default async function RootLayout(props: React.PropsWithChildren<LayoutAr
  return (
    <html lang={params.lang}>
      <head>
+        <FontPreload />
        <AdobeSDKScript />
        <GTMScript />
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
--- a/apps/scandic-web/fonts/font-preloading.tsx
+++ b/apps/scandic-web/fonts/font-preloading.tsx
@@ -0,0 +1,34 @@
+export function FontPreload() {
+  return (
+    <>
+      <link
+        rel="preload"
+        href="/_static/fonts/biro-script-plus/regular.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="/_static/fonts/brandon-text/bold.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="/_static/fonts/fira-sans/medium.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="/_static/fonts/fira-sans/regular.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+    </>
+  )
+}
--- a/packages/design-system/lib/fonts.css
+++ b/packages/design-system/lib/fonts.css
@@ -1,5 +1,5 @@
@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'biro script plus';
  font-style: normal;
  font-weight: 400;
@@ -7,7 +7,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'brandon text';
  font-weight: 700;
  src:
@@ -16,7 +16,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'brandon text';
  font-weight: 900;
  src:
@@ -25,7 +25,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Domaine Sans Text';
  font-style: normal;
  font-weight: 300;
@@ -37,7 +37,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Domaine Sans Text';
  font-style: normal;
  font-weight: 400;
@@ -49,7 +49,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'fira sans';
  font-style: normal;
  font-weight: 300;
@@ -57,7 +57,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'fira sans';
  font-style: normal;
  font-weight: 400;
@@ -65,7 +65,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'fira sans';
  font-style: normal;
  font-weight: 500;
@@ -73,7 +73,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'fira sans';
  font-style: normal;
  font-weight: 600;
@@ -81,7 +81,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'fira sans';
  font-style: normal;
  font-weight: 700;
@@ -89,7 +89,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'fira sans';
  font-style: normal;
  font-weight: 900;
@@ -97,7 +97,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: Garamond;
  font-style: normal;
  font-weight: 400;
@@ -109,7 +109,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
@@ -119,7 +119,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: Gotham;
  font-style: normal;
  font-weight: 700;
@@ -129,7 +129,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Neue Haas Grotesk Display Pro';
  font-style: normal;
  font-weight: 400;
@@ -141,7 +141,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Neue Haas Grotesk Display Pro';
  font-style: normal;
  font-weight: 500;
@@ -153,7 +153,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Prumo text';
  font-style: normal;
  font-weight: 300;
@@ -163,7 +163,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: normal;
  font-weight: 900;
@@ -171,7 +171,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: italic;
  font-weight: 900;
@@ -180,7 +180,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: normal;
  font-weight: 700;
@@ -188,7 +188,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: italic;
  font-weight: 700;
@@ -197,7 +197,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: normal;
  font-weight: 300;
@@ -205,7 +205,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: italic;
  font-weight: 300;
@@ -214,7 +214,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: normal;
  font-weight: 500;
@@ -222,7 +222,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: italic;
  font-weight: 500;
@@ -231,7 +231,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: normal;
  font-weight: 400;
@@ -239,7 +239,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: italic;
  font-weight: 400;
@@ -248,7 +248,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: normal;
  font-weight: 200;
@@ -256,7 +256,7 @@
 }

@font-face {
-  font-display: fallback;
+  font-display: swap;
  font-family: 'Canela Deck';
  font-style: italic;
  font-weight: 200;