Import .otf font file on to react using @material/ui

I am using @material/ui for react project. And gonna import new .otf font. Here is what I have done.

import sf_ui_display_black from './fonts/sf-ui-display-black.otf'
import sf_ui_display_bold from './fonts/sf-ui-display-bold.otf'
import sf_ui_display_heavy from './fonts/sf-ui-display-heavy.otf'
import sf_ui_display_light from './fonts/sf-ui-display-light.otf'
import sf_ui_display_medium from './fonts/sf-ui-display-medium.otf'
import sf_ui_display_semibold from './fonts/sf-ui-display-semibold.otf'
import sf_ui_display_thin from './fonts/sf-ui-display-thin.otf'
import sf_ui_display_ultralight from './fonts/sf-ui-display-light.otf'


const theme = createMuiTheme({
  typography: {
    blackFontFamily: [sf_ui_display_black].join(','),
    boldFontFamily: [sf_ui_display_bold].join(','),
    heavyFontFamily: [sf_ui_display_heavy].join(','),
    lightFontFamily: [sf_ui_display_light].join(','),
    mediumFontFamily: [sf_ui_display_medium].join(','),
    semiBoldFontFamily: [sf_ui_display_semibold].join(','),
    thinFontFamily: [sf_ui_display_thin].join(','),
    ultralightFontFamily: [sf_ui_display_ultralight].join(','),
  },
})

Have used that below way but also not working

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',
};

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

I need to find the way import otf font file using material/ui

Answer

Create new styles.css file in src/fonts on your project Copy all fonts files on there. Define font-faces as it below

    @font-face {
        font-family: 'SF UI Display Ultralight';
        font-style: normal;
        font-weight: normal;
        src: local('SF UI Display Ultralight'), url('sf-ui-display-ultralight.otf') format('opentype');
    }
    

    @font-face {
        font-family: 'SF UI Display Thin';
        font-style: normal;
        font-weight: normal;
        src: local('SF UI Display Thin'), url('sf-ui-display-thin.otf') format('opentype');
    }
    

    @font-face {
        font-family: 'SF UI Display Light';
        font-style: normal;
        font-weight: normal;
        src: local('SF UI Display Light'), url('sf-ui-display-light.otf') format('opentype');
    }
    

    @font-face {
        font-family: 'SF UI Display Medium';
        font-style: normal;
        font-weight: normal;
        src: local('SF UI Display Medium'), url('sf-ui-display-medium.otf') format('opentype');
    }
    

    @font-face {
        font-family: 'SF UI Display Semibold';
        font-style: normal;
        font-weight: normal;
        src: local('SF UI Display Semibold'), url('sf-ui-display-semibold.otf') format('opentype');
    }
        

    @font-face {
        font-family: 'SF UI Display Bold';
        font-style: normal;
        font-weight: normal;
        src: local('SF UI Display Bold'), url('sf-ui-display-bold.otf') format('opentype');
    }
    

    @font-face {
        font-family: 'SF UI Display Heavy';
        font-style: normal;
        font-weight: normal;
        src: local('SF UI Display Heavy'), url('sf-ui-display-heavy.otf') format('opentype');
    }
    

    @font-face {
        font-family: 'SF UI Display Black';
        font-style: normal;
        font-weight: normal;
    src: local('SF UI Display Black'), url('sf-ui-display-black.otf') format('opentype');
        }

And then just use them on your App.js on material/ui let me know if it’s working

Leave a Reply

Your email address will not be published. Required fields are marked *