'Next.js: custom font raises blinking

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.

Question: how to get rid of double font downloading?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Next.js: custom font raises blinking

Sources

Related Questions