How to use custom fonts with Evergreen v5

[Lasvad]

Hi everyone,

I'm struggling to figure out how to use the ThemeProvider to update the default font used by each component. I've read through this issue a couple times from 2019 #542 which is based on v4 and look at the theme docs for v5 from Github https://evergreen.segment.com/get-started/theming/.

Currently I have something like this

const theme = merge(defaultTheme, {
  typography: {
    fontFamilies: {
      display: "arial",
      ui: "arial",
      mono: "arial"
    }
  }
});

   <Heading size={200}>test test test</Heading>
    <Heading size={900}>test test test</Heading>
    <Paragraph>test test test</Paragraph>
    <Text size={300}>test test test</Text>
    <br />
    <Text size={600}>test test test</Text>

(in the image, when I mark it as "themed" or "not themed", I am referring to the fontFamily being properly set. The reset of the component, such as font weight and font size seem to be working as expected based on the Typography components )

typography components don't properly theme.
component look correct.
component seems to depended on the weight used. Text 300 which uses the UI fontFamily, while Text 600 uses the Display fontFamily.

Initially I thought it may have to do with the fontFamily used, and that Display was not being updated correctly, but both UI and Display font families are not updated properly for the component.

Looking at the codesandbox found in the issue from 2019, https://codesandbox.io/s/04nxv61wmv?fontsize=14, the font does not get set with the proper fontFamily

Am I missing something to have this properly work or is this not working atm? If so, what would be the proper way to set the fontFamily on all components? I could set the fontFamily every time I use a component, but that feels wrong 🤷‍♂️. I know there are some big theming changes coming in v6 so when that is released I will definitely upgrade to it, but currently there must be a way other individuals are using custom fonts with v5 Evergreen.

Thanks in advance for any comments and help.

[harshhpaatel]

Try something like this, it worked for me

import { ThemeProvider, defaultTheme } from 'evergreen-ui';
import { merge } from 'lodash';

const myTheme = merge({}, defaultTheme, {
    fontFamilies: {
        display: '"Euclid Circular B", "SF UI Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
        ui: '"Euclid Circular B", "SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
        mono: '"SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace'
    }
});

And then using the <ThemeProvider value={myTheme}>

[brandongregoryscott]

This is correct. I took a look at the sandbox originally referenced and it is setting the font family except for the Heading component. It's on a much older version of Evergreen so there may have been a bug w/ theming the font for that component, but it should be working on v6+ https://codesandbox.io/s/evergreen-discussions-1163-2tph5