Custom font in theme does not applied

[boskiv]

App

import { useState } from "react";
import {
  Button,
  Pane,
  Text,
  majorScale,
  defaultTheme,
  ThemeProvider,
} from "evergreen-ui";
import Header from "./Header";
import Editor from "./Editor";
import Output from "./Output";
import Debug from "./Debug";
import {merge} from "lodash";

const theme = merge(defaultTheme, {
  typography: {
    fontFamilies: {
      display: "IBM Plex Sans",
      ui: "IBM Plex Sans",
      mono: "IBM Plex Mono",
    }
  }
});

function App() {
  return (
    <ThemeProvider value={theme}>
      <div className="flex flex-col">
        <Header />
        <Editor />
        <div className="flex">
          <Output />
          <Debug />
        </div>
      </div>
    </ThemeProvider>
  );
}

export default App;

Header

import { Button, Heading, Link, Pane } from "evergreen-ui";
import React from "react";

function Header() {
  return (
    <Pane display="flex" padding={10} background="#1A192B" borderBottom="muted" borderRadius={3}>
      <Pane flex={1} alignItems="center" display="flex">
        <Heading size={600} color="white">Left Aligned</Heading>
      </Pane>
      <Pane>
        {/* Below you can see the marginRight property on a Button. */}
        <Link marginRight={8} size={300} className="nav-link" cursor="pointer">LOGIN</Link>
        <Link marginRight={8} size={300} className="nav-link" cursor="pointer">REGISTER</Link>

      </Pane>
    </Pane>
  );
}

export default Header;

[brandongregoryscott]

Hey @boskiv,

It looks like you're merging the fontFamilies object incorrectly. The correct place would be at the root level, i.e.

const theme = merge(defaultTheme, {
  fontFamilies: {
    display: "IBM Plex Sans",
    ui: "IBM Plex Sans",
    mono: "IBM Plex Mono"
  }
});

If you're using TypeScript, I would recommend upgrading to v6.7.0 or higher. There is a mergeTheme function that provides a type-safe way to merge on custom theme values to ensure they still match the expected shape.

Here's an example CodeSandbox that demonstrates it (should be very similar to what you already have!) https://codesandbox.io/s/evergreen-issues-1403-0cp3q?file=/src/App.tsx