diff --git a/pkgs/webview-ui/app/src/index.css b/pkgs/webview-ui/app/src/index.css
index 4b543fa90..fc082a8dd 100644
--- a/pkgs/webview-ui/app/src/index.css
+++ b/pkgs/webview-ui/app/src/index.css
@@ -9,17 +9,17 @@
 @font-face {
   font-family: "Archivo";
   font-weight: 400;
-  src: url(../.fonts/Archiv0-Regular.otf) format("opentype");
+  src: url(../.fonts/ArchivoSemiCondensed-Regular.woff2) format("woff2");
 }
 @font-face {
   font-family: "Archivo";
   font-weight: 500;
-  src: url(../.fonts/Archiv0-Medium.otf) format("opentype");
+  src: url(../.fonts/ArchivoSemiCondensed-Medium.woff2) format("woff2");
 }
 @font-face {
   font-family: "Archivo";
   font-weight: 600;
-  src: url(../.fonts/Archiv0-Bold.otf) format("opentype");
+  src: url(../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2");
 }
 
 :root {
diff --git a/pkgs/webview-ui/flake-module.nix b/pkgs/webview-ui/flake-module.nix
index 5e4dd1e79..697b89305 100644
--- a/pkgs/webview-ui/flake-module.nix
+++ b/pkgs/webview-ui/flake-module.nix
@@ -8,6 +8,30 @@
       ...
     }:
     {
+      packages.fonts =
+        let
+          # 400 -> Regular
+          archivoRegular = pkgs.fetchurl {
+            url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-Regular.woff2";
+            hash = "sha256-3PeB6tMpbYxR9JFyQ+yjpM7bAvZIjcJ4eBiHr9iV5p4=";
+          };
+          # 500 -> Medium
+          archivoMedium = pkgs.fetchurl {
+            url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-Medium.woff2";
+            hash = "sha256-IKaY3YhpmjMaIVUpwKRLd6eFiIihBoAP99I/pwmyll8=";
+          };
+          # 600 -> SemiBold
+          archivoSemiBold = pkgs.fetchurl {
+            url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-SemiBold.woff2";
+            hash = "sha256-fOE+b+UeTRoj+sDdUWR1pPCZVn0ABy6FEDDmXrOA4LY=";
+          };
+        in
+        pkgs.runCommand "" { } ''
+          mkdir -p $out
+          cp ${archivoRegular} $out/ArchivoSemiCondensed-Regular.woff2
+          cp ${archivoMedium} $out/ArchivoSemiCondensed-Medium.woff2
+          cp ${archivoSemiBold} $out/ArchivoSemiCondensed-SemiBold.woff2
+        '';
       packages.webview-ui = pkgs.buildNpmPackage {
         pname = "clan-webview-ui";
         version = "0.0.1";
@@ -20,7 +44,7 @@
         preBuild = ''
           mkdir -p api
           cp -r ${config.packages.clan-ts-api}/* api
-          cp -r ${pkgs.texlivePackages.archivo.tex}/fonts/opentype/public/archivo ".fonts"
+          cp -r ${self'.packages.fonts} ".fonts"
         '';
       };
       devShells.webview-ui = pkgs.mkShell {
@@ -34,7 +58,8 @@
           export NODE_PATH="$PKG_ROOT/app/node_modules"
           export PATH="$NODE_PATH/.bin:$PATH"
 
-          cp -r ${pkgs.texlivePackages.archivo.tex}/fonts/opentype/public/archivo "$PKG_ROOT/app/.fonts"
+          cp -r ${self'.packages.fonts} "$PKG_ROOT/app/.fonts"
+          chmod -R +w "$PKG_ROOT/app/.fonts"
 
           # Define the yellow color code
           YELLOW='\033[1;33m'