Custom fonts as default

[DanBlakeNZ]

Hi there,

We are considering React Spectrum for our company application and I have been playing around with it to see how it all works. I'm still pretty new to it but I have been able to set up and use custom brand colours etc via a provider.
However I have a question around implementing custom fonts which will be required to keep brand consistency. We would need a custom default font, I can't really figure out how this is done within Spectrum. Is it locked into use Adobe Clean or is there a recommend way to set a custom font as the default font?

Thanks!

[snowystinger]

You could set it via css variables, see https://github.com/adobe/react-spectrum/blob/main/packages/%40adobe/spectrum-css-temp/vars/spectrum-global.css#L252
There are a few entries in that file for font family, and a couple components may also set it explicitly on themselves, you'd need to search a little bit. I think button is one of them.
And if you're familiar with storybook, we have an example of what would be called a custom theme to do this kind of thing, https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/provider/stories/custom-theme.css

[DanBlakeNZ]

Hi, thanks for coming back to me on that appreciated! I will take a look, but that looks similar to how I set/override other variables so hopefully will work.

[br0wsa]

Dear Adobe Spectrum Team,

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

I have been trying to incorporate the OpenDyslexic typography into my project, but I have not been able to find a clear solution. I have attempted to use Tailwind CSS, as well as importing the font directly or using a custom theme provider, but unfortunately, none of these methods have been successful.

I would greatly appreciate it if you could provide me with information on whether it is possible to customize fonts in Adobe Spectrum and, if so, any guidance on how to do so.

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

Best regards, @br0wsa @snowystinger @kamal @infil00p

[snowystinger]

Hi, sorry for the delay.
If you're an Adobe employee, please reach out internally, I would have different guidance than I am about to provide here.

If you're external and are trying to match Adobe's styles because you're building something in our eco-system, then I can reach out for you to our design.

If you are none of those things, then I might suggest using our new React Aria Components and own all of your own styles. You could use Tailwind to get started with some nice looking defaults for example.
https://react-spectrum.adobe.com/react-aria/react-aria-components.html
https://github.com/adobe/react-spectrum/tree/main/examples/rac-tailwind

And finally, if all those options are out and you can control the font sets you download. You could just use any font with the @font-face and set the font family to adobe-clean like so https://codesandbox.io/s/priceless-fog-0efb9n?file=/src/styles.css