test subfont

frontend/index.html

@@ -11,7 +11,7 @@
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
-
+    
     <title>Stirling PDF</title>
   </head>
   <body>

frontend/package.json

@@ -25,7 +25,6 @@
     "i18next-browser-languagedetector": "^8.1.0",
     "i18next-http-backend": "^3.0.2",
     "jszip": "^3.10.1",
-    "material-symbols": "^0.33.0",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^3.11.174",
     "react": "^19.1.0",
@@ -37,7 +36,7 @@
   },
   "scripts": {
     "dev": "npx tsc --noEmit && vite",
-    "build": "npx tsc --noEmit && vite build",
+    "build": "npx tsc --noEmit && vite build && subfont dist --in-place --font-family='Material Symbols Rounded'",
     "preview": "vite preview",
     "generate-licenses": "node scripts/generate-licenses.js",
     "test": "vitest",
@@ -79,6 +78,7 @@
     "postcss-cli": "^11.0.1",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
+    "subfont": "^7.2.1",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vitest": "^1.0.0"

frontend/src/index.css

@@ -1,8 +1,4 @@
-@import 'material-symbols/rounded.css'; 
+@import './styles/material-symbols-rounded.css';
-
-.material-symbols-rounded {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-}
 
 body {
   margin: 0;

frontend/src/styles/material-symbols-rounded.css

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: "Material Symbols Rounded";
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url("/fonts/material-symbols-rounded.woff2") format("woff2");
+}
+
+.material-symbols-rounded {
+  font-family: "Material Symbols Rounded";
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+}