body font from theme not applying

Describe the bug I’m using gatsby-plugin-theme-ui (with gatsby-starter-default) and using the Styled component from theme-ui and I’m not seeing the fonts change for any “body” components (div, p, etc). What’s strange is that the headings change just fine.

To Reproduce Contents of my src/gatsby-plugin-theme-ui/index.js:

import theme from "@theme-ui/preset-tailwind";

export default {
  ...theme,
  fonts: {
    ...theme.fonts,
    body: "Arial, sans-serif",
    heading: "Arial, sans-serif"
  },
};

Expected behavior I would expect the body fonts to change when I change the body key. As I mentioned the headings do change, so I’m not sure if I’m doing something wrong :\

[jxnblk]

This is the current behavior (the docs might not be super clear), but the next version will apply some typographic styles to the body element by default, with an option to disable that behavior

[JaKXz]

@jxnblk thanks for the reply, that makes sense.

So I tried removing Styled.root and just putting this in my theme file as documented, using preset-base:

import theme from "@theme-ui/preset-base";

export default {
  ...theme,
  fonts: {
    ...theme.fonts,
    heading: `'Cochin', 'Libre Baskerville', serif`,
    body: `'Open Sans', ${theme.fonts.body}`,
  },
  styles: {
    root: {
      // uses the theme values provided above
      fontFamily: "body",
      fontWeight: "body",
    },
  },
}

but still no dice, the styles don’t even show up: