[WEB-5675] chore: implement fontsource as the fonts library (#8398)

Author: aaryan610

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 }) {

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:*",

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 */

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 = () => ({

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:*",

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";
 

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";
 

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 }) {

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:*",

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";