Fonts are not applied for primitive elements

[sarbull]

Provide a general summary of the issue here

I just created a new project using webpack, following the tutorial on the main page and in order to make <Heading> and <Text> components have the proper font from the S2 Library i had to add a .css file in my project above the import '@react-spectrum/s2/page.css'; which contains the following contents.

🤔 Expected Behavior?

The components should automatically get their fonts from the library.

😯 Current Behavior

Fallbacks to Times New Roman

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Create new project from scratch, use the components

Version

1.0.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[sarbull]

here's the repository for the webpack build i created https://github.com/sarbull/react-spectrum-s2-build

[yihuiliao]

Right so the <Text> and <Heading> components are only meant to be used inside other components. Otherwise, the expectation is that you use normal HTML elements like <div>, <p>, <h3> and style them using style macros. So for your example, this might be what you would have:

export default function Home() {
  return (
    <div>
      <h3 className={style({font: 'heading'})}>Home component example</Heading>
      <span className={style({font: 'ui-lg'})}>This is a text component example</span>
      <Button variant="accent">Click me</Button>
    </div>
  );
}

You can see what values can be set here for the font: https://react-spectrum.adobe.com/style-macro#text