0

I'm using Material UI with Create React App and trying to include the "Open Sans" font that I downloaded in ttf format. Following the documentation on Material UI for self-hosted fonts, my current theme.js file looks like this:

import OpenSansRegular from "./fonts/OpenSans-Regular.ttf";
import OpenSansBold from "./fonts/OpenSans-Bold.ttf";
import OpenSansSemiBold from "./fonts/OpenSans-SemiBold.ttf";
import { createMuiTheme } from "@material-ui/core/styles";

const openSansRegular = {
  fontFamily: "Open Sans",
  fontStyle: "normal",
  fontDisplay: "swap",
  src: `
    local("Open Sans"),
    local("OpenSans-Regular")
    url(${OpenSansRegular}) format("ttf")
  `,
};

const openSansSemibold = {
  fontFamily: "Open Sans",
  fontStyle: "normal",
  fontDisplay: "swap",
  src: `
    local("Open Sans"),
    local("OpenSans-SemiBold")
    url(${OpenSansSemiBold}) format("ttf")
  `,
};

const openSansBold = {
  fontFamily: "Open Sans",
  fontStyle: "normal",
  fontDisplay: "swap",
  src: `
    local("Open Sans"),
    local("OpenSans-Bold")
    url(${OpenSansBold}) format("ttf")
  `,
};

const theme = createMuiTheme({
  typography: {
    fontFamily: "Open Sans",
    fontSize: 14,
    h1: {
      fontSize: 20,
      fontWeight: "bold",
    },
    h2: {
      fontSize: 18,
      fontWeight: "bold",
    },
    h3: {
      fontSize: 16,
      fontWeight: "bold",
    },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [openSansRegular]
      }
    }
  },
});

export default theme;

I am unable to figure out how to actually use its variants such as openSansSemiBold and openSansBold. Where exactly do I specify in the theme so they are recognized? And say I want a text to be semibold in some part of the app, how exactly I am going to refer to it? I haven't been able to find a clear answer to this so far.

Muhammad Salif
  • 36
  • 6
Rajat Bansal
  • 315
  • 3
  • 15
  • [Don't load universal opentype fonts (ttf/otf) on the web](/a/36110385/740553), load their woff2 (with woff fallback for IE11) versions. Also, never use `local()` if you care enough about your typography to use a webfont: `local()` loads whatever name happens to match, without _any_ consideration for version: why would you settle for some users getting different fonts from what you intended them to get? – Mike 'Pomax' Kamermans Sep 17 '20 at 15:57
  • Thanks @Mike'Pomax'Kamermans , I just followed the documentation on Material UI so wasn't aware that locale had such a drawback. Yes, I want fonts to be same for everyone. – Rajat Bansal Sep 17 '20 at 16:00
  • @Mike'Pomax'Kamermans I downloaded Open Sans font family from Google Fonts https://fonts.google.com/specimen/Open+Sans#standard-styles But it only has TTF in that package. I didnt see woff types there – Rajat Bansal Sep 17 '20 at 16:06
  • If you're using actual google webfonts: why make thing needlessly complicated? Don't download them, and instead update your HTML template to include the `` code that google webfonts gives you for your chosen weights and styles under the "embed" tab. – Mike 'Pomax' Kamermans Sep 17 '20 at 16:31

1 Answers1

0

You can put all fonts into array.

   var customFontFamily = [openSansRegular,openSansSemibold,openSansBold];
   var customTypo = {
     ...
     body1 :{
          fontFamily: 'OpenSans-Regular',
     },
      h1:{
          fontFamily: 'OpenSans-SemiBold',
      },
      h2:{
          fontFamily: 'OpenSans-Bold',
      },
      ...
  };
  const theme = createMuiTheme({
  typography: customTypo 
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [customFontFamily]
      }
    }
  },
});
Can Aras
  • 11
  • 1