Font Styles not getting applied by default

[Altair2169]

I have defined my theme.config like this.

const theme = {
  fonts: {
    heading: 'proxima nova black',
    subHeading: 'proxima nova semibold',
    body: 'proxima nova regular',
  },
  colors: {
    text: '#373838',
    background: '#FFD600',
  },
  text: {
    heading: {
      fontFamily: 'heading',
    },
  },
};

By default, the background and text colors are applied on every component in my app but the fonts are not. Where should I place these fonts to have them applied by defaul?

EDIT: The only answer I found says to used styles.root. But again the same problem arises. I have defined fonts for heading body etc.
but I can only use font family like body, heading in root. So what is the point of defining them in typography if they are not used as expected

[hasparus]

The "fonts" property in the theme is a scale. This is where you define design tokens — you prepare ingredients for later use.

Other things can grab these tokens from scales and use them.

As you noticed, body styles we apply use colors.background, but you can use these scales yourself with sx prop and variants.

import { Heading } from "theme-ui";

<Heading>Woop</Heading>; // uses fontFamily: "heading" internally

<Heading as="h3" sx={{ fontFamily: "subHeading" }}>
And we can use previously defined tokens in "sx" prop.
</Heading>;

[Altair2169]

basically we use the sx prop for every heading we want to style this way? Is there a way I can just declare that if it's a h1 tag use Heading else use subHeading etc? like how colors is applied globally everywhere?

[hasparus]

EDIT: The only answer I found says to used styles.root. But again the same problem arises. I have defined fonts for heading body etc.
but I can only use font family like body, heading in root. So what is the point of defining them in typography if they are not used as expected

Actually, you should be able to use any token you defined inside of styles.root.
I presume your { fontFamily: "subHeading" } is not working there? That would be a bug — Do you have a reproduction repo, perhaps?

---

You can treat components from theme-ui and @theme-ui/components as building blocks — exactly the same as other React components.

So, if you're building an app, building your design system on top of components imported from Theme UI (and possibly other libraries, as we don't have charts, typeaheads, nor dialogs) will make sense.

import * as themeUi from '@theme-ui/components';

export function Heading(props) {
  // other fancy logic
  return (
    <Heading
      sx={{
        fontFamily: 'subheading',
        '&:is(h1)': { fontFamily: 'heading' }
        ...props.sx,
      }}
      {...props} 
    />
  )
}

For simple styling of Theme UI components, you should be able to use variants, but don't be afraid of treating Theme UI components as low-level building blocks.

Here's how you'd style Heading with variants:

As you can notice in Heading docs, it takes its styles from theme.text.heading variant, so we can either add the styles above to theme.text.heading variant.

export const theme = {
  text: {
    heading: {
       fontFamily: 'subheading',
       '&:is(h1)': { fontFamily: 'heading' }
    }
  }
  // ...
}

or create multiple variants to use with <Heading variant="my-variant" />

export const theme = {
  text: {
    heading: {
       fontFamily: 'subheading',
       '&:is(h1)': { fontFamily: 'heading' }
    }
    "my-variant": {
       color: "red"
    }
  }
  // ...
}

like how colors is applied globally everywhere?

If you're building a blog, and you just want to style all h1 with fontFamily: "heading" and all h2, h3, h4, h5 with "subheading", you can use BaseStyles component to treat your whole theme.styles object as one big stylesheet, and cascade all styles there.

// BlogPost.js

import { BaseStyles } from 'theme-ui'

export function BlogPost({ rawHtml }) {
  return (
    <BaseStyles>
      <div dangerouslySetInnerHtml={{ __html: rawHtml }} />
    </BaseStyles>
  )
}

// theme.js

/** @type {import("theme-ui").Theme} */
export const theme = {
  fonts: { heading: "Comic Sans MS", subheading: "Times New Roman" }
  styles: {
    h1: { fontFamily: "heading" }
    "h2, h3, h4, h5": { fontFamily: "subheading" }
  }
}

Also, if you want to style every h1 and every h2 in some manner, you can always add it to a global stylesheet in a CSS file. You don't have to use CSS-in-JS for everything, you can mix and match depending on your use-case.

[Altair2169]

Thanks for the info. I'll try out the BaseStyles