We are currently implementing a variety of custom fonts with different weights for various purposes. With our entire stack now using Material UI with JSS theming and styling, we aim to eliminate the remaining .scss files in our folder structure.
All the fonts are functioning perfectly with the SCSS syntax at present.
In the main app's main entry point, we have an index.scss file that imports:
@import 'styles/fonts';
The styles/_fonts.scss includes multiple font faces:
@font-face {
font-family: 'FooFont';
src: url('styles/fonts/FooFont_LtIt.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
The font files are stored within the styles/fonts folder.
I have successfully incorporated global Material UI makeStyles styling into the head, allowing me to inject global CSS rather than component-based JSS:
'@global': {
'@font-face': [
{
fontFamily: 'FooFont',
src: 'url("styles/fonts/FooFont_Rg.ttf") format("truetype")',
fontWeight: 400,
fontStyle: 'normal',
}
],
'*': {
boxSizing: 'border-box',
},
html: {
height: '100%',
},
...
This code snippet creates a <style> tag at the end of the <head> and applies the styles. It works well for non-font styling.
A major issue arises here: Despite downloading the fonts, the page elements continue to use the fallback font instead of updating to the desired font.
I have also attempted utilizing JSS directly and injecting the CSS at the beginning of the <head> but without success. Manually adding the fonts to the <style> tags at the start of the head results in the font download (confirmed in the Network tab) but the page elements still refuse to update and stick to the fallback font.