Having difficulty overriding some elements with a specific font, as it seems to work perfectly on Chrome but not on other browsers like Safari and FireFox. Could there be something overlooked?
Below is the code snippet:
const customTheme = createMuiTheme({
MuiTypography: {
h1: {
fontFamily: 'Source Sans Pro'
}
}
}
});
const MyComponent = () => {
return (
<ThemeProvider theme={customTheme}>
<CssBaseline />
<Typography variant='h1'>The Source Sans Pro font is correctly applied on Chrome, but not on other browsers.</Typography>
</ThemeProvider>
)
}