2

I'm creating Material-UI application using Next.js template. After custom font has been provided via npm/next-fonts the problem of twice font fetching is appeared.

import GilroyRegularWoff from '../assets/fonts/Gilroy-Regular.woff';

const gilroy = {
  fontFamily: 'Gilroy',
  fontStyle: 'normal',
  fontWeight: 400,
  src: `url(${GilroyRegularWoff}) format('woff'),url(${GilroyRegularTtf}) format('truetype')`,
};

// Create a theme instance.
const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Gilroy',
    ].join(),
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [gilroy],
      },
    },
  },
});

The Font was downloaded twice as shown in web inspector. enter image description here

Question: how to get rid of double font downloading?

Andrey Ashurko
  • 109
  • 1
  • 8

0 Answers0