React with Material UI not finding custom font

Question

I have my mui theme defined like this:

export default createMuiTheme({
  typography: {
    fontFamily: '"Nunito Sans", "Helvetica", "Arial", sans-serif',
    fontWeightLight: 300,
    fontWeightMedium: 600,
    fontWeightRegular: 400
    }
  }
});

I have the fonts being loaded in using App.css from local files. I can see from the network requests that these files are being found.

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), 
  url(../assets/font/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
  unicode-range: 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, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(../assets/font/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
  unicode-range: 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, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Nunito Sans SemiBold'), local('NunitoSans-SemiBold'), 
  url(../assets/font/pe03MImSLYBIv1o4X1M8cc9iB85tU1E.woff2) format('woff2');
  unicode-range: 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, U+FFFD;
}

The issue is that the UI is falling back to "Helvetica". I can see no reason why "Nunito Sans" is not being used by MUI. Annoyingly this setup was working fine before and is now failing. Anyone any ideas why this might not work? Thanks!

Answer 1

Here’s a working example: https://codesandbox.io/s/mzlmxpw4r8?fontsize=14

I think there are two possible problems you could be having.

Configuring the Material UI theme

// Import the wrapper component, and the the creator function
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

// Create a new theme using Nunito Sans
const theme = createMuiTheme({
  typography: {
    fontFamily: "Nunito Sans, Roboto, sans-serif"
  }
});

const App = function(props) {
  // Pass the theme as a prop to the theme provider
  return (
    <MuiThemeProvider theme={theme}>
      <Demo />
    </MuiThemeProvider>
  );
};

For the sake of this demo, I thought it would be easier to use the hosted version of Nunito Sans on Google Fonts, so my index.html file also has the following:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500"
/>

Changing how you load the fonts

You mentioned you’re seeing the requests for the files coming through, so it’s probably not this, but I thought I would note it anyway.

From the example CSS you provide, it looks to me like you’ve copied the CSS declaration from Google Fonts itself. When I visit now for Nunito Sans, I get the exact same result: https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,50

However, this is different depending on the browser requesting the CSS. For example, if you are on an browser that supports WOFF but not WOFF2, you’ll be served the WOFF files.

Google Fonts has its own reasons and logic to handle this automatically, so it’s worth considering if it would be a good option for you. Otherwise, if you do want to host the fonts locally, downloading them directly from the Google Fonts API will be less reliable than getting them from another source with all the formats you might want (WOFF and WOFF2 is almost always sufficient at this point, and you can support an extra ~9% of browsers in use by adding the WOFF formats, without much extra effort).

For example, after download the WOFF as well:

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src:
    url('../assets/font/NunitoSans-400.woff2') format('woff2'),
    url('../assets/font/NunitoSans-400.woff') format('woff');
}

Or, because Material UI works with the typefaces- packages on npm, you could install the formats and CSS you need that way:

npm install typeface-nunito-sans

Then at the top of your entry JavaScript file:

import "typeface-nunito-sans";

// Or require('typeface-nunito-sans') if you aren’t using import

Still, my first suggestion would be to start with the live Google Fonts version of Nunito Sans, and change your approach from there as necessary:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500" />

Hope that helps!