possibility of customizing fonts in Adobe Spectrum

[br0wsa]

📝 Feedback

Dear Adobe Spectrum Team,

👋 I hope this message finds you well. I am writing to inquire about the possibility of customizing fonts in Adobe Spectrum.

I have been attempting to incorporate the OpenDyslexic typography into my project but have not yet found a clear solution. Despite trying various methods, including using Tailwind CSS and importing the font directly or using a custom theme provider, I have been unsuccessful.

Therefore, I would greatly appreciate any information or guidance you could provide on customizing fonts in Adobe Spectrum.

Thank you for your time and consideration, and I look forward to hearing back from you soon.

Best regards,

💻 Code Sample

import { defaultTheme } from "@adobe/react-spectrum";

const customTheme = {
  ...defaultTheme,
  fonts: {
    ...defaultTheme.fonts,
    sans: '"OpenDyslexic", sans-serif',
  },
  fontFamilies: {
    ...defaultTheme.fontFamilies,
    OpenDyslexic:
      "url('./fonts/open-dyslexic/OpenDyslexic-Regular.otf') format('opentype')",
  },
};

export { customTheme };

🌍 Your Environment

• React && Vite && Vitest
• Tailwind CSS

[LFDanLu]

Mind providing a codesandbox or a minimal reproduction? If you find that you want more freedom to customize the look of the React Spectrum components, you can check out React Aria Components too

[yihuiliao]

Closing stale issue. I don't think we'll be adding support for customizing fonts in RSP since we implement the Spectrum design system. I think using React Aria Components like Daniel mentioned above would be a better fit for something like this.

[snowystinger]

There's a couple other issues that have come through in the past about customizing fonts, have a look through those as well. I think some of the suggestions were setting the font-face name in the CSS attribute to the same name as the Adobe fonts, so it'd just pick up your font instead.