chore(storefront): Update storefront to use the Altinn CDN for Inter …

…font (#809)
digdir · Sep 13, 2023 · bd819f9 · bd819f9
1 parent 8e5ebf8
commit bd819f9
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 19 deletions.
diff --git 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/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/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.tsx b/storefront/pages/_app.tsx
@@ -4,29 +4,20 @@ 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';
 import { Analytics } from '@vercel/analytics/react';
 
 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',
-});
-
 const queryClient = new QueryClient();
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <div className={cn(inter.className, 'root')}>
+      <div className={'root'}>
         <JumpToMain />
         <Header />
         <Component {...pageProps} />

diff --git 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