Serve Assistant font locally

GeotrekCE · Nov 29, 2024 · 82cf623 · 82cf623
1 parent 5f2ea2b
commit 82cf623
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git 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
@@ -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
diff --git 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: {