From 84bc0f92a055bc0e28eef87b1153b1d74e706526 Mon Sep 17 00:00:00 2001
From: Gianluca Zuccarelli <gzuccare@redhat.com>
Date: Thu, 5 Jun 2025 17:06:08 +0000
Subject: [PATCH] cockpit: fix fonts

The fonts weren't getting loaded properly and cockpit was falling back
to `Helvetica`. This was particularly noticeable on the `ReviewStep` of
the `CreateImageWizard`.
---
 cockpit/webpack.config.ts | 10 +++++++-
 src/AppCockpit.scss       | 52 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/cockpit/webpack.config.ts b/cockpit/webpack.config.ts
index 00a170fd..b2bbcea4 100644
--- a/cockpit/webpack.config.ts
+++ b/cockpit/webpack.config.ts
@@ -75,7 +75,15 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+
+          {
+            loader: 'css-loader',
+            options: { url: false },
+          },
+          'sass-loader',
+        ],
       },
     ],
   },
diff --git a/src/AppCockpit.scss b/src/AppCockpit.scss
index 01d91e40..ae8b9216 100644
--- a/src/AppCockpit.scss
+++ b/src/AppCockpit.scss
@@ -1,3 +1,55 @@
+@font-face {
+  font-family: 'Red Hat Text';
+  font-style: normal;
+  font-weight: 400 500;
+  src: url('/cockpit/static/fonts/RedHatText/RedHatTextVF.woff2')
+    format('woff2-variations');
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'Red Hat Text';
+  font-style: italic;
+  font-weight: 400 500;
+  src: url('/cockpit/static/fonts/RedHatText/RedHatTextVF-Italic.woff2')
+    format('woff2-variations');
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'Red Hat Display';
+  font-style: normal;
+  font-weight: 400 700;
+  src: url('/cockpit/static/fonts/RedHatDisplay/RedHatDisplayVF.woff2')
+    format('woff2-variations');
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'Red Hat Display';
+  font-style: italic;
+  font-weight: 400 700;
+  src: url('/cockpit/static/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2')
+    format('woff2-variations');
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: RedHatText;
+  font-style: normal;
+  font-weight: 400;
+  src: url('/cockpit/static/fonts/RedHatText-Regular.woff2') format('woff2');
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: RedHatText;
+  font-style: normal;
+  font-weight: 700;
+  src: url('/cockpit/static/fonts/RedHatText-Medium.woff2') format('woff2');
+  font-display: fallback;
+}
+
 // Override as PF Page doesn't allow empty masthead and sidebar
 @media (min-width: 75rem) {
   .pf-v6-c-page.no-masthead-sidebar {