[Bug]: Storefront UI preset overrides custom font family

[MyFedora]

Describe the Bug

It's not possible to specify custom fonts for storefront headings. headings defined in @storefront-ui/react/tailwind-config takes precedence over headings defined in the user config. This also affects body fonts.

Components and blocks that rely on headings like the Modal and Banners don't respect the custom heading fonts by default.

Removing @storefront-ui/react/tailwind-config breaks a few components and blocks.

Expected behavior

It should be possible to specify custom fonts for storefront headings.

Steps to reproduce

1. git clone https://github.com/MyFedora/storefront-ui.git
2. cd storefront-ui
3. npm i
4. cd apps/storefront
5. npm i
6. npm run dev
7. Observe how .typography-headline-5, .font-headings and .font-body use the default font family.
8. Remove tailwindConfig from presets in apps/storefront/tailwind.config.ts.
9. Observe how .typography-headline-5, .font-headings and .font-body use the custom font family.

SFUI version

@storefront-ui/react@2.7.1

Framework

React, Next.js

Node version

24.3.0

Browser

Microsoft Edge for Business 138.0.3351.95 (Official build) (64-bit)

OS

Windows 11 Enterprise 24H2 26100.4652

Relevant log output

Able to fix / change the documentation?

• Yes
• No

Code of Conduct

• I agree to follow this project's Code of Conduct

[FRSgit]

Hey @MyFedora!

How do you try to configure custom font in your project? Can you show me some code snippets or setup a project on stackblitz?

I'm asking, because just tries to customize headings font and it seems to be working. Configuration:

Effect in the preview app: