Custom font isn't loading on custom theme for Material UI
See original GitHub issueCurrent 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 🕹
- Create a new project. You’ll need to add this rule on your
webpack.config.js
:
{
test: /\.ttf$/,
use: 'file-loader',
exclude: /node_modules/,
},
-
Add some custom fonts on your project, and copy and paste the first code block on this issue
-
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'))
- 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 |
Issue Analytics
- State:
- Created 4 years ago
- Reactions:4
- Comments:25 (8 by maintainers)
Top Results From Across the Web
Custom font isn't loading on custom theme for Material UI
Add some custom fonts on your project, and copy and paste the first code block on this issue. On your index.tsx , use:...
Read more >Custom font isn't loading on custom theme for Material UI
So I tried to customize the font using plain CSS. I found a workaround removing the overrides property in createMuiTheme and with this...
Read more >3 ways to add custom fonts to your MUI project - LogRocket Blog
Learn three simple ways to add custom fonts to a MUI project, including the Google Fonts CDN, google-webfonts-helper, and npm.
Read more >Typography - Material UI - MUI
You can change the font family with the theme.typography.fontFamily property. ... They will be loaded from your webserver instead of a CDN.
Read more >How to add a custom font in React Material UI | Suraj Sharma
Create a folder Fonts in the src folder, move the downloaded font to the Fonts folder. import TitilliumWeb from './Fonts/TitilliumWeb-SemiBold.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I believe it’s a support request.
I’m having this same issue.
CssBaseline
is also always setting thefont-family
to"Roboto", "Helvetica", "Arial", sans-serif
.It appears that
CssBaseline
doesn’t actually set@font-face
in itsstyles
JSS, and it sets things likefont-family
from computed values fromtypography
.This is definitely a bug, because doing the exact steps specified in the documentation doesn’t actually work.
I also question why it’s preferable to override
CssBaseline
in the first place.typography
exists in the theme API, and this is 100% a typography-related feature. In my opinion,typography
should have a key calledfontFaces
on it consisting ofJssFontface[]
, andJssFontFace
’s type definitions should be exported, so that I can validate my custom font faces against it.