From d3825ad89621324ed7971d5a1fbd512089814148 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 12 Sep 2023 12:46:11 +0200
Subject: [PATCH 1/2] use altinn cdn inter font

---
 storefront/components/Meta/Meta.tsx |  4 ++++
 storefront/package.json             |  1 -
 storefront/pages/_app.module.css    |  3 +++
 storefront/pages/_app.tsx           | 10 ++--------
 yarn.lock                           |  8 --------
 5 files changed, 9 insertions(+), 17 deletions(-)
 create mode 100644 storefront/pages/_app.module.css

diff --git a/storefront/components/Meta/Meta.tsx b/storefront/components/Meta/Meta.tsx
index e926da9d11..f54f2c25ab 100644
--- a/storefront/components/Meta/Meta.tsx
+++ b/storefront/components/Meta/Meta.tsx
@@ -20,6 +20,10 @@ const Meta = ({ title, description }: MetaProps) => {
         name='viewport'
         content='width=device-width, initial-scale=1'
       />
+      <link
+        rel='stylesheet'
+        href='https://altinncdn.no/fonts/inter/inter.css'
+      />
       <link
         rel='shortcut icon'
         href='/favicon.ico'
diff --git a/storefront/package.json b/storefront/package.json
index 2f4b5053b4..9aff67228d 100644
--- a/storefront/package.json
+++ b/storefront/package.json
@@ -14,7 +14,6 @@
     "@mdx-js/loader": "^2.0.0-rc.2",
     "@mdx-js/react": "^1.6.22",
     "@navikt/aksel-icons": "^2.8.4",
-    "@next/font": "13.0.7",
     "@reach/disclosure": "^0.18.0",
     "@tanstack/react-query": "^4.29.5",
     "@tippyjs/react": "^4.2.6",
diff --git a/storefront/pages/_app.module.css b/storefront/pages/_app.module.css
new file mode 100644
index 0000000000..70b97f14f5
--- /dev/null
+++ b/storefront/pages/_app.module.css
@@ -0,0 +1,3 @@
+.appRoot {
+  font-family: 'Inter', sans-serif;
+}
diff --git a/storefront/pages/_app.tsx b/storefront/pages/_app.tsx
index 74bdacffdc..1ef8be2f69 100644
--- a/storefront/pages/_app.tsx
+++ b/storefront/pages/_app.tsx
@@ -4,7 +4,6 @@ import 'tippy.js/dist/tippy.css';
 import '@altinn/figma-design-tokens/dist/tokens.css';
 import '@digdir/design-system-tokens/brand/digdir/tokens.css';
 import '../globals.css';
-import { Inter } from '@next/font/google';
 import type { AppProps } from 'next/app';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import cn from 'classnames';
@@ -14,19 +13,14 @@ import { Header } from '../components/Header/Header';
 import { Footer } from '../components/Footer/Footer';
 import { JumpToMain } from '../components/JumpToMain';
 
-const inter = Inter({
-  weight: ['400', '500', '600', '700'],
-  style: ['normal'],
-  subsets: ['latin'],
-  display: 'fallback',
-});
+import classes from './_app.module.css';
 
 const queryClient = new QueryClient();
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <div className={cn(inter.className, 'root')}>
+      <div className={cn(classes.appRoot, 'root')}>
         <JumpToMain />
         <Header />
         <Component {...pageProps} />
diff --git a/yarn.lock b/yarn.lock
index 921efd15a3..bfe132dcab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4891,13 +4891,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/font@npm:13.0.7":
-  version: 13.0.7
-  resolution: "@next/font@npm:13.0.7"
-  checksum: 88324e483561ed1372b97d434b98cff3c3adfeafc4217b45ff96f429c42ea4c6eebb089b34d8ef353aaf6413aa5f6d918a2ea83701ad129d2cc6f6751184d82a
-  languageName: node
-  linkType: hard
-
 "@next/swc-darwin-arm64@npm:13.4.7":
   version: 13.4.7
   resolution: "@next/swc-darwin-arm64@npm:13.4.7"
@@ -22142,7 +22135,6 @@ __metadata:
     "@mdx-js/loader": ^2.0.0-rc.2
     "@mdx-js/react": ^1.6.22
     "@navikt/aksel-icons": ^2.8.4
-    "@next/font": 13.0.7
     "@reach/disclosure": ^0.18.0
     "@tanstack/react-query": ^4.29.5
     "@tippyjs/react": ^4.2.6

From 145064083a10cb5bd94263b4baac6de199751846 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 12 Sep 2023 13:55:42 +0200
Subject: [PATCH 2/2] set font-family on root

---
 storefront/globals.css           | 1 +
 storefront/pages/_app.module.css | 3 ---
 storefront/pages/_app.tsx        | 5 +----
 3 files changed, 2 insertions(+), 7 deletions(-)
 delete mode 100644 storefront/pages/_app.module.css

diff --git a/storefront/globals.css b/storefront/globals.css
index a656f85fd9..d49348bbe4 100644
--- a/storefront/globals.css
+++ b/storefront/globals.css
@@ -55,6 +55,7 @@ h6 {
   min-height: calc(100vh);
   overflow: hidden;
   position: relative;
+  font-family: 'Inter', sans-serif;
 }
 
 .root > main {
diff --git a/storefront/pages/_app.module.css b/storefront/pages/_app.module.css
deleted file mode 100644
index 70b97f14f5..0000000000
--- a/storefront/pages/_app.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.appRoot {
-  font-family: 'Inter', sans-serif;
-}
diff --git a/storefront/pages/_app.tsx b/storefront/pages/_app.tsx
index 1ef8be2f69..be35eb7f6c 100644
--- a/storefront/pages/_app.tsx
+++ b/storefront/pages/_app.tsx
@@ -6,21 +6,18 @@ import '@digdir/design-system-tokens/brand/digdir/tokens.css';
 import '../globals.css';
 import type { AppProps } from 'next/app';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import cn from 'classnames';
 import { Analytics } from '@vercel/analytics/react';
 
 import { Header } from '../components/Header/Header';
 import { Footer } from '../components/Footer/Footer';
 import { JumpToMain } from '../components/JumpToMain';
 
-import classes from './_app.module.css';
-
 const queryClient = new QueryClient();
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <div className={cn(classes.appRoot, 'root')}>
+      <div className={'root'}>
         <JumpToMain />
         <Header />
         <Component {...pageProps} />