Custom font isn't loading on custom theme for Material UI

[macabeus]

Current Behavior 😯

I'm using a custom font in my React web application. So I wrote this code:

import React, { FunctionComponent } from 'react'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
import SofiaProLightTtf from '../../assets/font/sofia-pro-light.ttf'
import SofiaProTtf from '../../assets/font/sofia-pro-regular.ttf'

const sofiaPro = {
  fontFamily: 'Sofia Pro',
  fontStyle: 'normal',
  fontWeight: 100,
  src: `url(${SofiaProTtf})`
}

const sofiaProLight = {
  fontFamily: 'Sofia Pro Light',
  fontStyle: 'normal',
  fontWeight: 100,
  src: `url(${SofiaProLightTtf})`
}

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Sofia Pro',
    body1: {
      fontFamily: 'Sofia Pro Light'
    }
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [sofiaPro, sofiaProLight]
      }
    }
  }
})

const Theme: FunctionComponent = ({ children }) => (
  <MuiThemeProvider theme={theme}>{ children }</MuiThemeProvider>
)

export default Theme

But it isn't working. So I tried to customize the font using plain CSS.

I found a workaround removing the overrides property in createMuiTheme and with this CSS:

<style>
  @font-face {
    font-family: 'Sofia Pro';
    font-style: normal;
    font-weight: 100;
    src: url("/65e0f064b96a52b92f7293b673054b0b.ttf");
  }

  @font-face {
    font-family: 'Sofia Pro Light';
    font-style: normal;
    font-weight: 100;
    src: url("/d15399628129cc8121c08073df25f0dd.ttf");
  }
</style>

But it is a very bad workaround...
I opened a question on Stack Overflow but nobody answered, so I think that it's a bug.

I'm using the latest Material UI version:

"@material-ui/core": "4.7.0",
"@material-ui/lab": "4.0.0-alpha.34",

Expected Behavior 🤔

We need be able to load a custom font using only createMuiTheme, without any custom CSS.

Steps to Reproduce 🕹

1. Create a new project. You'll need to add this rule on your webpack.config.js:

  {
    test: /\.ttf$/,
    use: 'file-loader',
    exclude: /node_modules/,
  },

2. Add some custom fonts on your project, and copy and paste the first code block on this issue

3. On your index.tsx, use:

import React from 'react'
import ReactDOM from 'react-dom'
import Theme from './theme'

const App = () => (
  <Theme>
    <p>hello world</p>
  </Theme>
)

ReactDOM.render(<App />, document.getElementById('app'))

4. The custom font wasn't load.

Context 🔦

I need to use a custom font. Beside I found a workaround, I would like to have a better code.

Your Environment 🌎

Tech	Version
Material-UI	v4.7.0
React	16.12.0
Browser	Chore, Firefox and Safari
TypeScript	3.7.2

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[macabeus]

@oliviertassinari Thank you for you notice quickly my issue, but I think that it's a bug, not a support.
I already opened a question on Stack Overflow and nobody answered that.

I'm sorry if I'm doing something wrongly.

[oliviertassinari]

Using regular CSS sounds like a good solution too.

[macabeus]

@oliviertassinari Well... I think that it isn't a good solution.
I wrote a slightly better code using tsx:

const Theme: FunctionComponent = ({ children }) => (
  <>
    <style
      dangerouslySetInnerHTML={{__html: `
        @font-face {
          font-family: 'Sofia Pro';
          font-style: normal;
          font-weight: 100;
          src: url('/${SofiaProTtf}');
        }

        @font-face {
          font-family: 'Sofia Pro Light';
          font-style: normal;
          font-weight: 100;
          src: url('/${SofiaProLightTtf}');
        }`}
      }
    />
    <MuiThemeProvider theme={theme}>{ children }</MuiThemeProvider>
  </>
)

But it's still very awful because:

• no type safe
• no highlighting or code completion
• since it isn't called by createMuiTheme neither any code on Material UI, new updates on this library could break this hack

[stephankaag]

Why is this closed while there is no real fix for a new bug?

[macabeus]

@stephankaag Because @oliviertassinari prefer a workaround over fix this bug.

[oliviertassinari]

I believe it's a support request.

[stephankaag]

Just like #18826 is a support request?

[macabeus]

@oliviertassinari Sorry, but I don't agree. It isn't a support request, but a bug.
It's a weird behaviour and, as like I already said here, it requires a workaround that has many disadvantages.

Look, I'm needing to use something called **DANGEROUS**SetInnerHTML and to define the style of Material UI components outside of createMuiTheme.

[oliviertassinari]

@stephankaag Yes, modules duplication.
@macabeus What's wrong with https://material-ui.com/customization/typography/#self-hosted-fonts? Did you render the CssBasline component?

[macabeus]

@oliviertassinari overrides.MuiCssBaseline['@global']['@font-face'] isn't working.
For some reason, the component requires the font (Sofia Pro in this case), but it wasn't requested by browser.

Using CssBaseline component, I have a different problem.
I want this (my code with workaround works fine):

But with CssBaseline (and with the first code that I wrote in this issue) I'll have this:

It isn't Sofia Pro font, also it changes the style of others components.

@stephankaag Do you have these same problems?

[stephankaag]

Yep

[oliviertassinari]

Do you have a reproduction?