Merge pull request #487 from madeindjs/WF-27

chore(ui): use local fonts instead of CDN. WF-27
writer · Jul 8, 2024 · 56fc0dc · 56fc0dc
2 parents 6da67a1 + 7415e73
commit 56fc0dc
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ui/index.html b/src/ui/index.html
@@ -3,10 +3,6 @@
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/png" href="./static/favicon.png?2" />
-		<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-		<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Writer Framework</title>
 		<style>
@@ -24,7 +20,9 @@
 			}
 
 			.material-symbols-outlined {
+				font-family: 'Material Symbols Outlined Variable', sans-serif;
 				font-size: 100%;
+				font-style: normal;
 			}
 
 			#app {

diff --git a/src/ui/package.json b/src/ui/package.json
@@ -16,6 +16,8 @@
 	},
 	"dependencies": {
 		"@apache-arrow/ts": "^15.0.2",
+		"@fontsource-variable/material-symbols-outlined": "^5.0.34",
+		"@fontsource/poppins": "^5.0.14",
 		"@googlemaps/js-api-loader": "^1.16.6",
 		"@monaco-editor/loader": "^1.3.3",
 		"@tato30/vue-pdf": "^1.9.6",
@@ -59,4 +61,4 @@
 		"eslint-plugin-storybook": "0.8.0",
 		"storybook": "8.0.5"
 	}
-}
+}
diff --git a/src/ui/src/fonts.ts b/src/ui/src/fonts.ts
@@ -0,0 +1,12 @@
+import "@fontsource-variable/material-symbols-outlined";
+
+import "@fontsource/poppins/300-italic.css";
+import "@fontsource/poppins/300.css";
+import "@fontsource/poppins/400-italic.css";
+import "@fontsource/poppins/400.css";
+import "@fontsource/poppins/500-italic.css";
+import "@fontsource/poppins/500.css";
+import "@fontsource/poppins/600-italic.css";
+import "@fontsource/poppins/600.css";
+import "@fontsource/poppins/700-italic.css";
+import "@fontsource/poppins/700.css";
diff --git a/src/ui/src/main.ts b/src/ui/src/main.ts
@@ -1,9 +1,10 @@
 import * as vue from "vue";
 import { App, createApp } from "vue";
-import injectionKeys from "./injectionKeys";
-import { generateCore } from "./core";
-import { generateBuilderManager } from "./builder/builderManager.js";
 import VueDOMPurifyHTML from "vue-dompurify-html";
+import { generateBuilderManager } from "./builder/builderManager.js";
+import { generateCore } from "./core";
+import "./fonts";
+import injectionKeys from "./injectionKeys";
 
 /**
  * RemixIcon by remixicon.com