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

Question

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... Is there a better solution, specific for a project using Material UI? Did I do something wrong on createMuiTheme?

The best way of using external libraries are to use that in `angular.json` file. In your case under styles you can import fonts. — Awais, Dec 17 '19 at 05:24
I'm developing using React, not Angular. I'll write it on question... — macabeus, Dec 17 '19 at 05:26
Does this answer your question? [How to add fonts to create-react-app based projects?](https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects) — Awais, Dec 17 '19 at 05:28
@Awais Nop, because my question is specific for Material UI, not in any React application. I would like a better solution using `createMuiTheme` from Material UI — macabeus, Dec 17 '19 at 05:30
did you find the solution? as i get a huge typescript error following the documentation. maybe you can share also the webpack config of yours? — TheWeeezel, Mar 27 '20 at 07:40
@TheWeeezel I don't know exactly what do you mean... Anyway, there are three main steps: [1] You should set the file loader (https://github.com/macabeus/klo-gba.js/blob/6a6ff405996dcde61ecd3a11f3ee2d5f6012b02a/brush/config/former-kit/webpack.config.js#L122-L128) [2] Add `declare module '*.ttf'` on your types file [3] Now you could use `import MyFontFile from '../../assets/font/my-font.ttf'` — macabeus, Mar 29 '20 at 16:56
If you prefer, you also could set the type of `.tff` modules: `declare module '*.ttf' { const content: string; export default content }` — macabeus, Mar 29 '20 at 16:58
but why is there no answer like this. I now got it :D Thanks! — TheWeeezel, Mar 30 '20 at 06:52

olaleye olabanjo · Answer 1 · 2022-10-28T12:31:20.823

0

// Best solution for production use.
// npm install @fontsource/exo

// Then you can import it in your entry point like this:
import '@fontsource/roboto/300.css';

// Then, config theme:
const theme = createTheme({
  typography: {
    fontFamily: 'Exo, sans-serif',
  },
})

// in entry file(index.css/app.css)
body { font-family: "Exo", sans-serif; }

edited Oct 28 '22 at 12:31

answered Oct 21 '22 at 12:25

olaleye olabanjo

118
7

score -1 · Answer 2 · answered Dec 17 '19 at 12:54

you first need to configure your webpack to use fonts or use a link or cdn to the font, after configuring your webpack to handle fonts or using a cdn you can go to the theme.js and add your font so you can use it globally

import RalewayWoff2 from './fonts/Raleway-Regular.woff2';

const raleway = {
  fontFamily: 'Raleway',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('Raleway'),
    local('Raleway-Regular'),
    url(${RalewayWoff2}) format('woff2')
  `,
  unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
};

in your theme use cssbaseline like this

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Raleway, Arial',
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [raleway],
      },
    },
  },
});

i get this from the documentation

https://material-ui.com/customization/typography/

Yeah, I followed exactly that, but it isn't working, as like you can see in my code on question... Well... I think that it's a bug. I'm writing an issue on Material UI's repository — macabeus, Dec 17 '19 at 17:39

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

2 Answers2