Repository: provectus/kafka-ui
Issue: AirGap: Remove internet dependency / google fonts
Labels: type/enhancement
scope/frontend
status/accepted

Hi!

we are accessing latest kafka-ui via a corporate socks proxy, which does not have internet access.

Would it be possible to embed the fonts in the react-app (as part of static folder e.g.) instead of referencering those online?

https://github.com/provectus/kafka-ui/blob/master/kafka-ui-react-app/index.html#L10

```
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Roboto+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />

```

At the moment, our browser tries to reach following two google font online urls via socks proxy, which leads to a initial load of the kafka-ui of 30 seconds (browser gets a network timeout after 30 seconds):

https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap

https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap

Issue comments:
Hello there AydinChavez! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Hey, thanks for reaching out. It seems like we already have a PR by a volunteer, we'll review it soon :)

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/index.html b/kafka-ui-react-app/index.html
index 33e18ad2688..be10fc78a3a 100644
--- a/kafka-ui-react-app/index.html
+++ b/kafka-ui-react-app/index.html
@@ -3,13 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- Google fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Roboto+Mono:wght@400;500&display=swap"
-      rel="stylesheet"
-    />
 
     <!-- Favicons -->
     <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.ico" sizes="any" />
@@ -25,6 +18,35 @@
         return window.basePath+ "/" + importer;
       };
     </script>
+    <style>
+      @font-face {
+        font-family: 'Inter';
+        src: url('<%= PUBLIC_PATH %>/fonts/Inter-Medium.ttf') format('truetype');
+        font-weight: 500;
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: 'Inter';
+        src: url('<%= PUBLIC_PATH %>/fonts/Inter-Regular.ttf') format('truetype');
+        font-weight: 400;
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: 'Roboto Mono';
+        src: url('<%= PUBLIC_PATH %>/fonts/RobotoMono-Medium.ttf') format('truetype');
+        font-weight: 500;
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: 'Roboto Mono';
+        src: url('<%= PUBLIC_PATH %>/fonts/RobotoMono-Regular.ttf') format('truetype');
+        font-weight: 400;
+        font-display: swap;
+      }
+    </style>
   </head>
 
   <body>


Test patch: