diff --git a/apps/admin/app/root.tsx b/apps/admin/app/root.tsx
index cbae3753984..6ac6531a37e 100644
--- a/apps/admin/app/root.tsx
+++ b/apps/admin/app/root.tsx
@@ -10,6 +10,11 @@ import { LogoSpinner } from "@/components/common/logo-spinner";
import globalStyles from "@/styles/globals.css?url";
import type { Route } from "./+types/root";
import { AppProviders } from "./providers";
+// fonts
+import "@fontsource-variable/inter";
+import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
+import "@fontsource/material-symbols-rounded";
+import "@fontsource/ibm-plex-mono";
const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
const APP_DESCRIPTION =
@@ -22,6 +27,13 @@ export const links: LinksFunction = () => [
{ rel: "shortcut icon", href: faviconIco },
{ rel: "manifest", href: `/site.webmanifest.json` },
{ rel: "stylesheet", href: globalStyles },
+ {
+ rel: "preload",
+ href: interVariableWoff2,
+ as: "font",
+ type: "font/woff2",
+ crossOrigin: "anonymous",
+ },
];
export function Layout({ children }: { children: ReactNode }) {
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 6f6f768824b..25f0076f63c 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -19,6 +19,9 @@
},
"dependencies": {
"@bprogress/core": "catalog:",
+ "@fontsource-variable/inter": "5.2.8",
+ "@fontsource/ibm-plex-mono": "5.2.7",
+ "@fontsource/material-symbols-rounded": "5.2.30",
"@headlessui/react": "^1.7.19",
"@plane/constants": "workspace:*",
"@plane/hooks": "workspace:*",
diff --git a/apps/admin/styles/globals.css b/apps/admin/styles/globals.css
index be8c75a0a8c..7f7f2483a57 100644
--- a/apps/admin/styles/globals.css
+++ b/apps/admin/styles/globals.css
@@ -1,5 +1,4 @@
@import "@plane/tailwind-config/index.css";
-@import "@plane/propel/styles/fonts";
.shadow-custom {
box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
diff --git a/apps/space/app/root.tsx b/apps/space/app/root.tsx
index ad5e8fff22e..ca0651042e9 100644
--- a/apps/space/app/root.tsx
+++ b/apps/space/app/root.tsx
@@ -13,6 +13,11 @@ import type { Route } from "./+types/root";
// local imports
import ErrorPage from "./error";
import { AppProviders } from "./providers";
+// fonts
+import "@fontsource-variable/inter";
+import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
+import "@fontsource/material-symbols-rounded";
+import "@fontsource/ibm-plex-mono";
const APP_TITLE = "Plane Publish | Make your Plane boards public with one-click";
const APP_DESCRIPTION = "Plane Publish is a customer feedback management tool built on top of plane.so";
@@ -24,6 +29,13 @@ export const links: Route.LinksFunction = () => [
{ rel: "shortcut icon", href: faviconIco },
{ rel: "manifest", href: siteWebmanifest },
{ rel: "stylesheet", href: globalStyles },
+ {
+ rel: "preload",
+ href: interVariableWoff2,
+ as: "font",
+ type: "font/woff2",
+ crossOrigin: "anonymous",
+ },
];
export const headers: Route.HeadersFunction = () => ({
diff --git a/apps/space/package.json b/apps/space/package.json
index 774b08b4b7b..f1fef4b763c 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -18,6 +18,9 @@
},
"dependencies": {
"@bprogress/core": "catalog:",
+ "@fontsource-variable/inter": "5.2.8",
+ "@fontsource/ibm-plex-mono": "5.2.7",
+ "@fontsource/material-symbols-rounded": "5.2.30",
"@headlessui/react": "^1.7.19",
"@plane/constants": "workspace:*",
"@plane/editor": "workspace:*",
diff --git a/apps/space/styles/globals.css b/apps/space/styles/globals.css
index e77a5c236c6..ba7f052d193 100644
--- a/apps/space/styles/globals.css
+++ b/apps/space/styles/globals.css
@@ -1,6 +1,5 @@
@import "@plane/tailwind-config/index.css";
@import "@plane/editor/styles";
-@import "@plane/propel/styles/fonts";
@import "@plane/propel/styles/react-day-picker.css";
@plugin "@tailwindcss/typography";
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 47acca9984a..04a46a20580 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,8 +2,6 @@ import Script from "next/script";
// styles
import "@/styles/globals.css";
-import "@/styles/power-k.css";
-import "@/styles/emoji.css";
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
index a525bf3c6cf..7ce3d16ff55 100644
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -20,6 +20,11 @@ import type { Route } from "./+types/root";
// local
import { CustomErrorComponent } from "./error";
import { AppProvider } from "./provider";
+// fonts
+import "@fontsource-variable/inter";
+import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
+import "@fontsource/material-symbols-rounded";
+import "@fontsource/ibm-plex-mono";
const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
@@ -33,6 +38,13 @@ export const links: LinksFunction = () => [
{ rel: "apple-touch-icon", sizes: "512x512", href: icon512 },
{ rel: "manifest", href: "/manifest.json" },
{ rel: "stylesheet", href: globalStyles },
+ {
+ rel: "preload",
+ href: interVariableWoff2,
+ as: "font",
+ type: "font/woff2",
+ crossOrigin: "anonymous",
+ },
];
export function Layout({ children }: { children: ReactNode }) {
diff --git a/apps/web/package.json b/apps/web/package.json
index 22cc1252796..f775fd5c06c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -21,6 +21,9 @@
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "catalog:",
"@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
"@bprogress/core": "catalog:",
+ "@fontsource-variable/inter": "5.2.8",
+ "@fontsource/ibm-plex-mono": "5.2.7",
+ "@fontsource/material-symbols-rounded": "5.2.30",
"@headlessui/react": "^1.7.19",
"@intercom/messenger-js-sdk": "^0.0.12",
"@plane/constants": "workspace:*",
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index a2e0df5f422..ab520abe293 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -1,6 +1,5 @@
@import "@plane/tailwind-config/index.css";
@import "@plane/editor/styles";
-@import "@plane/propel/styles/fonts";
@import "@plane/propel/styles/react-day-picker.css";
@import "./power-k.css";
@import "./emoji.css";
diff --git a/packages/propel/.storybook/tailwind.css b/packages/propel/.storybook/tailwind.css
index baa553f51cb..aca4ed08ea0 100644
--- a/packages/propel/.storybook/tailwind.css
+++ b/packages/propel/.storybook/tailwind.css
@@ -1,3 +1,2 @@
@import "@plane/tailwind-config/index.css";
-@import "../src/styles/fonts/index.css";
@import "../src/styles/react-day-picker.css";
diff --git a/packages/propel/package.json b/packages/propel/package.json
index 932081a36ce..6ad58c11f6b 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -58,8 +58,6 @@
"./tooltip": "./dist/tooltip/index.js",
"./utils": "./dist/utils/index.js",
"./package.json": "./package.json",
- "./styles/fonts.css": "./dist/styles/fonts/index.css",
- "./styles/fonts": "./dist/styles/fonts/index.css",
"./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
"./styles/react-day-picker": "./dist/styles/react-day-picker.css"
},
diff --git a/packages/propel/src/emoji-icon-picker/logo.tsx b/packages/propel/src/emoji-icon-picker/logo.tsx
index dbed85f58b3..117fbec7247 100644
--- a/packages/propel/src/emoji-icon-picker/logo.tsx
+++ b/packages/propel/src/emoji-icon-picker/logo.tsx
@@ -34,7 +34,6 @@ export function Logo({ logo, size = 16, type = "material" }: Props) {
const value = in_use === "emoji" ? emoji?.value : icon?.name;
if (!value) return loadingSkeleton;
- if (!isMaterialSymbolsFontLoaded && type === "material") return loadingSkeleton;
// Emoji rendering
if (in_use === "emoji") {
@@ -66,6 +65,8 @@ export function Logo({ logo, size = 16, type = "material" }: Props) {
return ;
}
+ if (!isMaterialSymbolsFontLoaded) return loadingSkeleton;
+
// Material icon
return (
({
...exports,
- "./styles/fonts.css": "./dist/styles/fonts/index.css",
- "./styles/fonts": "./dist/styles/fonts/index.css",
"./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
"./styles/react-day-picker": "./dist/styles/react-day-picker.css",
}),
diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css
index fc7c75b83e8..b3e87a2890d 100644
--- a/packages/tailwind-config/variables.css
+++ b/packages/tailwind-config/variables.css
@@ -830,10 +830,10 @@
/* ---------- Font family ---------- */
--font-*: initial;
--font-heading:
- "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+ "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--font-body:
- "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+ "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
--font-code:
"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -1134,11 +1134,27 @@
@utility scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
- &::-webkit-scrollbar: {
+ &::-webkit-scrollbar {
display: none;
}
}
+@utility material-symbols-rounded {
+ font-family: "Material Symbols Rounded";
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px;
+ line-height: 1;
+ letter-spacing: normal;
+ text-transform: none;
+ display: inline-block;
+ white-space: nowrap;
+ word-wrap: normal;
+ direction: ltr;
+ font-feature-settings: "liga";
+ -webkit-font-smoothing: antialiased;
+}
+
/* Tailwind typography plugin overwrites */
@utility prose {
--tw-prose-body: var(--text-color-primary);
diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css
index 64fd6ebdff1..434ca7f9100 100644
--- a/packages/ui/styles/globals.css
+++ b/packages/ui/styles/globals.css
@@ -1,2 +1 @@
@import "@plane/tailwind-config/index.css";
-@import "@plane/propel/styles/fonts";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95b477f47eb..c9e6d54d87b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -192,6 +192,15 @@ importers:
'@bprogress/core':
specifier: 'catalog:'
version: 1.3.4
+ '@fontsource-variable/inter':
+ specifier: 5.2.8
+ version: 5.2.8
+ '@fontsource/ibm-plex-mono':
+ specifier: 5.2.7
+ version: 5.2.7
+ '@fontsource/material-symbols-rounded':
+ specifier: 5.2.30
+ version: 5.2.30
'@headlessui/react':
specifier: ^1.7.19
version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -425,6 +434,15 @@ importers:
'@bprogress/core':
specifier: 'catalog:'
version: 1.3.4
+ '@fontsource-variable/inter':
+ specifier: 5.2.8
+ version: 5.2.8
+ '@fontsource/ibm-plex-mono':
+ specifier: 5.2.7
+ version: 5.2.7
+ '@fontsource/material-symbols-rounded':
+ specifier: 5.2.30
+ version: 5.2.30
'@headlessui/react':
specifier: ^1.7.19
version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -573,6 +591,15 @@ importers:
'@bprogress/core':
specifier: 'catalog:'
version: 1.3.4
+ '@fontsource-variable/inter':
+ specifier: 5.2.8
+ version: 5.2.8
+ '@fontsource/ibm-plex-mono':
+ specifier: 5.2.7
+ version: 5.2.7
+ '@fontsource/material-symbols-rounded':
+ specifier: 5.2.30
+ version: 5.2.30
'@headlessui/react':
specifier: ^1.7.19
version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2095,6 +2122,15 @@ packages:
'@floating-ui/utils@0.2.10':
resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+ '@fontsource-variable/inter@5.2.8':
+ resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
+ '@fontsource/ibm-plex-mono@5.2.7':
+ resolution: {integrity: sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==}
+
+ '@fontsource/material-symbols-rounded@5.2.30':
+ resolution: {integrity: sha512-svIEPUzsJGdBMr0PwLH3wKndh7ZNB8IVlyKZPKvbGEX0f36gpGPzE2EZiXppb4UJgDUnyjphWzjJ28StuK6NCg==}
+
'@formatjs/ecma402-abstract@2.3.4':
resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
@@ -10154,6 +10190,12 @@ snapshots:
'@floating-ui/utils@0.2.10': {}
+ '@fontsource-variable/inter@5.2.8': {}
+
+ '@fontsource/ibm-plex-mono@5.2.7': {}
+
+ '@fontsource/material-symbols-rounded@5.2.30': {}
+
'@formatjs/ecma402-abstract@2.3.4':
dependencies:
'@formatjs/fast-memoize': 2.2.7