From 48d1928ead272cd731f8bff6fe1e2f8c0f95dd38 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:34:44 +0100
Subject: [PATCH] Serve Assistant font locally

---
 frontend/src/components/pages/_app/Root.tsx | 13 +++++++++++++
 frontend/src/pages/_app.tsx                 |  1 -
 frontend/src/public/fonts.css               |  1 -
 frontend/tailwind.config.js                 | 12 +++++++++++-
 4 files changed, 24 insertions(+), 3 deletions(-)
 delete mode 100644 frontend/src/public/fonts.css

diff --git a/frontend/src/components/pages/_app/Root.tsx b/frontend/src/components/pages/_app/Root.tsx
index 667126629..cd472aad0 100644
--- a/frontend/src/components/pages/_app/Root.tsx
+++ b/frontend/src/components/pages/_app/Root.tsx
@@ -1,5 +1,6 @@
 import getNextConfig from 'next/config';
 import Head from 'next/head';
+import { Assistant } from 'next/font/google';
 import { IntlProvider } from 'react-intl';
 import { getGlobalConfig } from 'modules/utils/api.config';
 import { getDefaultLanguage } from 'modules/header/utills';
@@ -16,6 +17,12 @@ const {
   publicRuntimeConfig: { locales },
 } = getNextConfig();
 
+const assistant = Assistant({
+  weight: ['400', '600', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
 export const Root: React.FC<React.PropsWithChildren> = props => {
   const router = useRouter();
   const language: string = router.locale ?? getDefaultLanguage() ?? 'fr';
@@ -54,6 +61,12 @@ export const Root: React.FC<React.PropsWithChildren> = props => {
           name="viewport"
           content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
         />
+
+        <style>{`
+          :root {
+            --font-assistant: ${assistant.style.fontFamily};
+          }
+        `}</style>
       </Head>
       {props.children}
     </IntlProvider>
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index b81de304b..2f9768246 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -5,7 +5,6 @@ import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/r
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ONE_MINUTE } from 'services/constants/staleTime';
 import '../styles/global.css';
-import '../public/fonts.css';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import 'orejime/dist/orejime.css';
diff --git a/frontend/src/public/fonts.css b/frontend/src/public/fonts.css
deleted file mode 100644
index 9e80741e1..000000000
--- a/frontend/src/public/fonts.css
+++ /dev/null
@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Assistant:100,200,300,400,500,600,700,800,900&display=swap');
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2e4900c7d..96f0d4568 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -8,7 +8,17 @@ module.exports = {
       desktop: '1024px',
     },
     fontFamily: {
-      main: `'Assistant', 'Helvetica', 'Arial', sans-serif`,
+      main: [
+        'var(--font-assistant)',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        'Segoe UI',
+        'Roboto',
+        'Helvetica Neue',
+        'ubuntu',
+        'Arial',
+        'sans-serif',
+      ],
       code: 'Monospace',
     },
     boxShadow: {