⏪️(frontend) add back Marianne font

Marianne font was in base64 in the ui-kit,
it was not an optimize way to do it.
We do not have a CDN yet so the best
is to put them back in the project in
waiting for a CDN options.

CHANGELOG.md

@@ -33,6 +33,7 @@ and this project adheres to
 - 🐛(makefile) Windows compatibility fix for Docker volume mounting #1264
 - 🐛(minio) fix user permission error with Minio and Windows #1264
 - 🐛(frontend) fix export when quote block and inline code #1319
+- 🐛(frontend) fix base64 font #1324
 
 ## [3.5.0] - 2025-07-31
 

src/frontend/apps/impress/cunningham.ts

@@ -50,6 +50,13 @@ tokens.themes.default.theme = {
       ...tokens.themes.default.theme.colors,
       ...customColors,
     },
+    font: {
+      ...tokens.themes.default.theme.font,
+      families: {
+        base: 'sans-serif',
+        accent: 'sans-serif',
+      },
+    },
   },
 };
 
@@ -89,6 +96,12 @@ const dsfrTheme = {
         widthFooter: '220px',
         alt: 'Gouvernement Logo',
       },
+      font: {
+        families: {
+          base: 'Marianne',
+          accent: 'Marianne',
+        },
+      },
     },
     components: {
       'la-gaufre': true,

src/frontend/apps/impress/public/assets/fonts/Marianne/Marianne-font.css

@@ -0,0 +1,101 @@
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Thin.woff2') format('woff2'),
+    url('Marianne-Thin.woff') format('woff');
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Thin_Italic.woff2') format('woff2'),
+    url('Marianne-Thin_Italic.woff') format('woff');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Light.woff2') format('woff2'),
+    url('Marianne-Light.woff') format('woff');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Light_Italic.woff2') format('woff2'),
+    url('Marianne-Light_Italic.woff') format('woff');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Regular.woff2') format('woff2'),
+    url('Marianne-Regular.woff') format('woff');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Regular_Italic.woff2') format('woff2'),
+    url('Marianne-Regular_Italic.woff') format('woff');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Medium.woff2') format('woff2'),
+    url('Marianne-Medium.woff') format('woff');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Medium_Italic.woff2') format('woff2'),
+    url('Marianne-Medium_Italic.woff') format('woff');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Bold.woff2') format('woff2'),
+    url('Marianne-Bold.woff') format('woff');
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-Bold_Italic.woff2') format('woff2'),
+    url('Marianne-Bold_Italic.woff') format('woff');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-ExtraBold.woff2') format('woff2'),
+    url('Marianne-ExtraBold.woff') format('woff');
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: Marianne;
+  src:
+    url('Marianne-ExtraBold_Italic.woff2') format('woff2'),
+    url('Marianne-ExtraBold_Italic.woff') format('woff');
+  font-weight: 800;
+  font-style: italic;
+}

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -1,5 +1,6 @@
 @import url('@gouvfr-lasuite/ui-kit/style');
 @import url('./cunningham-tokens.css');
+@import url('/assets/fonts/Marianne/Marianne-font.css');
 
 :root {
   /**

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -143,8 +143,8 @@
   --c--theme--font--weights--bold: 600;
   --c--theme--font--weights--extrabold: 800;
   --c--theme--font--weights--black: 900;
-  --c--theme--font--families--base: marianne;
-  --c--theme--font--families--accent: marianne;
+  --c--theme--font--families--base: sans-serif;
+  --c--theme--font--families--accent: sans-serif;
   --c--theme--font--letterspacings--h1: normal;
   --c--theme--font--letterspacings--h2: normal;
   --c--theme--font--letterspacings--h3: normal;
@@ -298,6 +298,9 @@
   --c--components--button--tertiary-text--color: var(
     --c--theme--colors--primary-600
   );
+  --c--components--button--tertiary-text--disabled: var(
+    --c--theme--colors--primary-300
+  );
   --c--components--button--danger--color-hover: white;
   --c--components--button--danger--background--color: var(
     --c--theme--colors--danger-600
@@ -553,6 +556,8 @@
   --c--theme--logo--widthHeader: 110px;
   --c--theme--logo--widthFooter: 220px;
   --c--theme--logo--alt: gouvernement logo;
+  --c--theme--font--families--base: marianne;
+  --c--theme--font--families--accent: marianne;
   --c--components--la-gaufre: true;
   --c--components--home-proconnect: true;
   --c--components--favicon--ico: /assets/favicon-dsfr.ico;

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -153,7 +153,7 @@ export const tokens = {
             extrabold: 800,
             black: 900,
           },
-          families: { base: 'Marianne', accent: 'Marianne' },
+          families: { base: 'sans-serif', accent: 'sans-serif' },
           letterSpacings: {
             h1: 'normal',
             h2: 'normal',
@@ -266,6 +266,7 @@ export const tokens = {
             'background--color-hover': '#eee',
             'color-hover': '#000091',
             color: '#313178',
+            disabled: '#CACAFB',
           },
           danger: {
             'color-hover': 'white',
@@ -435,6 +436,7 @@ export const tokens = {
           widthFooter: '220px',
           alt: 'Gouvernement Logo',
         },
+        font: { families: { base: 'Marianne', accent: 'Marianne' } },
       },
       components: {
         'la-gaufre': true,