[joy-ui] What is the correct way to specify a custom font-face in the theme?

[atrauzzi]

Duplicates

• I have searched the existing issues

Related page

https://mui.com/joy-ui/customization/theme-typography/#changing-the-default-font

Kind of issue

Missing information

Issue description

I was looking for the right place to put a font-face declaration and it appears that it isn't mentioned in the docs.

Context 🔦

Joy UI

[siriwatknp]

Thanks for asking, this is more of CSS related question. It depends on the framework that you use, but the recommended way is to use CSS file which could look like this:

// global.css or anyname.css
@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}

Then, to apply the font to Joy UI, set it in the theme:

extendTheme({
  fontFamily: {
    display: 'Trickster',
    body: 'Trickster',
  }
})

Learn more about theming from here.

[atrauzzi]

@siriwatknp -- My question was more around managing the @font-face declaration using the theme, rather than having to keep some CSS file separate somewhere.

[danilo-leal]

@atrauzzi hey! I think Jun mentions this is more of a CSS question because you wouldn't use the theme to manage it. You'd need to declare any font-face-related stuff in the place where you import the font and then refer to it on the theme, as he pointed out. Is there anything specific you could share that you were trying to do? Maybe with an example, we can be more helpful.