kilot5791

Тоже столкнулся с такой проблемой. Попробуй повторить пункт 3 из документации по установки WSL и обязательно не забудь перезагрузить ПК. Мне помогло. Если не помогло повтори c 1 пункта, так же с перезагрузкой.

Может кому поможет, я подключил шрифты следующим способом:

1) Создал файл с кастомной темой theme.jsx

import { createMuiTheme } from '@material-ui/core/styles';

// Здесь импортируем шрифты
import pathRegular from './fonts/Montserrat-Regular.woff2';
import pathBold from './fonts/Montserrat-Bold.woff2';
import pathMedium from './fonts/Montserrat-Medium.woff2';
import pathSemiBold from './fonts/Montserrat-SemiBold.woff2';
import pathExtraBold from './fonts/Montserrat-ExtraBold.woff2';

// С помощью класса мы будем создавать объекты.(чтобы под каждый шрифт не писать объект вручную, может быть есть какой то способ получше, но я новичок в js)
class Font {
    constructor(fname, fstyle, fweight, furl) {
        this.fname = fname;
        this.fstyle = fstyle;
        this.fweight = fweight;
        this.furl = furl;

        return {
            fontFamily: this.fname,
            fontStyle: this.fstyle,
            fontDisplay: 'swap',
            fontWeight: this.fweight,
            src: `
                local(${this.fname}),
                url(${this.furl}) 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 montserratRegular = new Font('Montserrat', 'normal', 400, pathRegular);
const montserratBold = new Font('Montserrat', 'normal', 700, pathBold);
const montserratSemiBold = new Font('Montserrat', 'normal', 600, pathSemiBold);
const montserratExtraBold = new Font('Montserrat', 'normal', 800, pathExtraBold);
const montserratMedium = new Font('Montserrat', 'normal', 500, pathMedium);

export const theme = createMuiTheme({
    typography: {
        fontFamily: 'Montserrat',
        fontSize: 24,
        body1: {
            fontWeight: 400
        },
        h1: {
            fontSize: 32,
            fontWeight: 700,
            color: '#444'
        } 
    },
// Если используется СssBaseline то для него нужно изменить шрифт глобально, если не используем то код ниже не пишем
    overrides: {
        MuiCssBaseline: {
          '@global': {
            '@font-face': [montserratRegular, montserratBold, montserratSemiBold, montserratExtraBold, montserratMedium],
          },
        },
      },
});

export default theme;

2) Импортируем тему в наше приложение:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

import './index.css';
import theme from './theme'

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

3) Само приложение App.js выглядит следующим образом:

import React from 'react'
import { Typography } from '@material-ui/core';

function App() {
  return (
    <div className="App">
      <Typography>Almost before we knew it, we had left the ground.</Typography>
      <Typography variant='h1'>Almost before we knew it, we had left the ground.</Typography>
    </div>
  );
}

export default App;

PS. Несмотря на то что в документации написано что можно импортировать шрифты в формате ttf, woff и woff2, ttf шрифты у меня не подключаются с этим кодом, woff я не пробовал