Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 2 commits into from
Dec 19, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8478f96
fix: fonts
aaryan610 Dec 19, 2025
147acd0
fix: material icon loading state conditions
aaryan610 Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions apps/admin/app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Comment on lines +14 to +17
Copy link
Copy Markdown
Collaborator

@lifeiscontent lifeiscontent Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have you tried changing files and watching live reload? if it doesn't crash this is fine, but I was experiencing issues with doing side effect imports like this previously.

I would use the ?url feature of vite and stick everything in links.

Copy link
Copy Markdown
Collaborator

@lifeiscontent lifeiscontent Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you might also try using the @import in the app css for fonts, as tailwind might be smart enough to merge it down into 1 sheet.

Copy link
Copy Markdown
Member Author

@aaryan610 aaryan610 Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we tested this approach. Everything works as expected.

Copy link
Copy Markdown
Member Author

@aaryan610 aaryan610 Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We tried using @import, but faced the same resolution issues during build.


const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
const APP_DESCRIPTION =
Expand All @@ -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 }) {
Expand Down
3 changes: 3 additions & 0 deletions apps/admin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:*",
Expand Down
1 change: 0 additions & 1 deletion apps/admin/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 */
Expand Down
12 changes: 12 additions & 0 deletions apps/space/app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 = () => ({
Expand Down
3 changes: 3 additions & 0 deletions apps/space/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:*",
Expand Down
1 change: 0 additions & 1 deletion apps/space/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
2 changes: 0 additions & 2 deletions apps/web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
12 changes: 12 additions & 0 deletions apps/web/app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";

Expand All @@ -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 }) {
Expand Down
3 changes: 3 additions & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:*",
Expand Down
1 change: 0 additions & 1 deletion apps/web/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
1 change: 0 additions & 1 deletion packages/propel/.storybook/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
@import "@plane/tailwind-config/index.css";
@import "../src/styles/fonts/index.css";
@import "../src/styles/react-day-picker.css";
2 changes: 0 additions & 2 deletions packages/propel/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
3 changes: 2 additions & 1 deletion packages/propel/src/emoji-icon-picker/logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand Down Expand Up @@ -66,6 +65,8 @@ export function Logo({ logo, size = 16, type = "material" }: Props) {
return <LucideIconElement style={{ color, height: size, width: size }} />;
}

if (!isMaterialSymbolsFontLoaded) return loadingSkeleton;

// Material icon
return (
<span
Expand Down
1 change: 0 additions & 1 deletion packages/propel/src/styles/fonts/Inter/LICENSE
View file
Open in desktop

This file was deleted.

Binary file removed packages/propel/src/styles/fonts/Inter/inter-v13-latin-200.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed packages/propel/src/styles/fonts/Inter/inter-v13-latin-300.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed packages/propel/src/styles/fonts/Inter/inter-v13-latin-500.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed packages/propel/src/styles/fonts/Inter/inter-v13-latin-600.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed packages/propel/src/styles/fonts/Inter/inter-v13-latin-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed packages/propel/src/styles/fonts/Inter/inter-v13-latin-800.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed packages/propel/src/styles/fonts/Inter/inter-v13-latin-regular.woff2
View file
Open in desktop
Binary file not shown.
1 change: 0 additions & 1 deletion packages/propel/src/styles/fonts/Material-Symbols-Rounded/LICENSE
View file
Open in desktop

This file was deleted.

Binary file removed ...c/styles/fonts/Material-Symbols-Rounded/material-symbols-rounded-v168-latin-regular.woff2
View file
Open in desktop
Binary file not shown.
87 changes: 0 additions & 87 deletions packages/propel/src/styles/fonts/index.css
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions packages/propel/tsdown.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ export default defineConfig({
exports: {
customExports: (exports) => ({
...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",
}),
Expand Down
22 changes: 19 additions & 3 deletions packages/tailwind-config/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
1 change: 0 additions & 1 deletion packages/ui/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
@import "@plane/tailwind-config/index.css";
@import "@plane/propel/styles/fonts";
42 changes: 42 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading