diff --git a/app/root.tsx b/app/root.tsx
index d2e31b7..7d153d7 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -12,11 +12,10 @@ import Footer from "@/components/LayoutFooter"; // Adjust the import path as nee
import "../styles/global.scss";
import { cssBundleHref } from "@remix-run/css-bundle"; // Adjust the import path as needed
+import "unfonts.css";
+
export const links: LinksFunction = () => [
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
- // Add your Google font links here
- // Example: { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400&display=swap" },
- // Example: { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Jaldi:wght@400&display=swap" },
];
export const meta: MetaFunction = () => [
@@ -33,7 +32,7 @@ export default function Root() {
-
+
diff --git a/package-lock.json b/package-lock.json
index 0829182..cad349f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
"version": "0.1.0",
"hasInstallScript": true,
"dependencies": {
+ "@fontsource/be-vietnam-pro": "^5.0.18",
+ "@fontsource/jaldi": "^5.0.8",
"@heroicons/react": "^2.0.18",
"@lumeweb/s5-js": "^0.1.0-develop.24",
"@prisma/client": "^5.6.0",
@@ -55,6 +57,7 @@
"tailwindcss-animate": "^1.0.7",
"ts-node": "^10.9.1",
"typescript": "^5.2.2",
+ "unplugin-fonts": "^1.1.1",
"vite": "^5.0.10",
"vite-tsconfig-paths": "^4.2.2"
}
@@ -1283,6 +1286,16 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
},
+ "node_modules/@fontsource/be-vietnam-pro": {
+ "version": "5.0.18",
+ "resolved": "https://registry.npmjs.org/@fontsource/be-vietnam-pro/-/be-vietnam-pro-5.0.18.tgz",
+ "integrity": "sha512-deIb6HgHYbz2onsmTC678cFvnQTZ4vojdn/LY+y/GTX12zAW4TWrw7C/4QwoTNgmzHROx7Rrazi2WGj6iogEgg=="
+ },
+ "node_modules/@fontsource/jaldi": {
+ "version": "5.0.8",
+ "resolved": "https://registry.npmjs.org/@fontsource/jaldi/-/jaldi-5.0.8.tgz",
+ "integrity": "sha512-SVOKAId55vGfjDvRBu6OAyN4tLVGk/G+AOGM+aFgGy16DvC+9/nH1qgJNGMyHX0blnH/01DWV3vyy/l60EceMg=="
+ },
"node_modules/@heroicons/react": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
@@ -13346,6 +13359,37 @@
"node": ">= 0.8"
}
},
+ "node_modules/unplugin": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.6.0.tgz",
+ "integrity": "sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==",
+ "dev": true,
+ "dependencies": {
+ "acorn": "^8.11.2",
+ "chokidar": "^3.5.3",
+ "webpack-sources": "^3.2.3",
+ "webpack-virtual-modules": "^0.6.1"
+ }
+ },
+ "node_modules/unplugin-fonts": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/unplugin-fonts/-/unplugin-fonts-1.1.1.tgz",
+ "integrity": "sha512-/Aw/rL9D2aslGGM0vi+2R2aG508RSwawLnnBuo+JDSqYc4cHJO1R1phllhN6GysEhBp/6a4B6+vSFPVapWyAAw==",
+ "dev": true,
+ "dependencies": {
+ "fast-glob": "^3.2.12",
+ "unplugin": "^1.3.1"
+ },
+ "peerDependencies": {
+ "@nuxt/kit": "^3.0.0",
+ "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@nuxt/kit": {
+ "optional": true
+ }
+ }
+ },
"node_modules/update-browserslist-db": {
"version": "1.0.13",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -14560,6 +14604,21 @@
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
+ "node_modules/webpack-sources": {
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+ "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+ "dev": true,
+ "engines": {
+ "node": ">=10.13.0"
+ }
+ },
+ "node_modules/webpack-virtual-modules": {
+ "version": "0.6.1",
+ "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
+ "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
+ "dev": true
+ },
"node_modules/whatwg-fetch": {
"version": "3.6.20",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
diff --git a/package.json b/package.json
index 220750e..e689b08 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
"postinstall": "patch-package"
},
"dependencies": {
+ "@fontsource/be-vietnam-pro": "^5.0.18",
+ "@fontsource/jaldi": "^5.0.8",
"@heroicons/react": "^2.0.18",
"@lumeweb/s5-js": "^0.1.0-develop.24",
"@prisma/client": "^5.6.0",
@@ -66,6 +68,7 @@
"tailwindcss-animate": "^1.0.7",
"ts-node": "^10.9.1",
"typescript": "^5.2.2",
+ "unplugin-fonts": "^1.1.1",
"vite": "^5.0.10",
"vite-tsconfig-paths": "^4.2.2"
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ca2ed52..97ed34b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,8 +13,8 @@ const config: Config = {
},
extend: {
fontFamily: {
- main: "var(--font-be-vietnam-pro)",
- secondary: "var(--font-jaldi)",
+ main: '"Be Vietnam Pro"',
+ secondary: '"Jaldi"',
},
colors: {
border: "hsl(var(--border))",
diff --git a/tsconfig.json b/tsconfig.json
index 22706a1..27b8b15 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,6 +30,7 @@
]
},
// Remix takes care of building everything in `remix build`.
- "noEmit": true
+ "noEmit": true,
+ "types": ["unplugin-fonts/client"]
}
}
diff --git a/vite.config.ts b/vite.config.ts
index 44138dd..35b164b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,9 +2,24 @@ import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import { installGlobals } from "@remix-run/node";
import tsconfigPaths from "vite-tsconfig-paths";
+import Unfonts from "unplugin-fonts/vite";
installGlobals();
export default defineConfig({
- plugins: [remix({ ignoredRouteFiles: ["**/.*"] }), tsconfigPaths()],
+ plugins: [
+ remix({ ignoredRouteFiles: ["**/.*"] }),
+ tsconfigPaths(),
+ Unfonts({
+ fontsource: {
+ /**
+ * Fonts families lists
+ */
+ families: [
+ { name: "Be Vietnam Pro", weights: [400], subset: "latin" },
+ { name: "Jaldi", weights: [400], subset: "latin" },
+ ],
+ },
+ }),
+ ],
});