CODEWITHSUNDEEP
reactjsmaterial-ui
Brandon
Brandon

Reputation: 7966

How do I apply a Font Theme in React Material-UI?

I'm trying to apply a google font to my Material UI react project, but can't seem to get it to take. I'm using Material UI 0.14.2.

My index.html font load: <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

My component where I apply the theme:

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';

const App = React.createClass({

    childContextTypes: {
        muiTheme: React.PropTypes.object,
    },
    getChildContext: function() {
        return {
            muiTheme: ThemeManager.modifyRawThemeFontFamily(ThemeManager.getMuiTheme(LightRawTheme), 'PT Sans, sans-serif')
        }
    },

...etc etc

}

Upvotes: 10

Views: 36213

Answers (6)

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8556

After update Material UI to:

"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",

In your theme.js

import { createTheme } from "@mui/material/styles";

// Create a theme instance.
const theme = createTheme({
  typography: {
    fontFamily: '"Merienda", cursive',
  },
  palette: {
    primary: {
       main: "rgb(68, 139, 68)",
    },
    secondary: {
      main: "rgb(141, 202, 141)",
      // contrastText: "#fff",
    },
    spacing: 24,
  },
});


export default theme;

Upvotes: 0

Mohammad
Mohammad

Reputation: 545

I use The bellow code and the result was successful. write the javascript bellow code in your own file and then write the @font-face in its CSS file:

import './App.css';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import createPalette from '@material-ui/core/styles/createPalette';
import createTypography from '@material-ui/core/styles/createTypography';

const theme = createMuiTheme({
  typography: createTypography(createPalette({}), {
    fontFamily: '"IRANSansWeb"'
  }),
});

function App() {
  return(
    <MuiThemeProvider theme={theme}>
    
    </MuiThemeProvider>
  );
}
@font-face{
  font-family: "IRANSansWeb";
  src: url('./fonts/iransans/ttf/IRANSansWeb.ttf') format('ttf'),
  url('./fonts/iransans/eot/IRANSansWeb.eot') format('eot'),
  url('./fonts/iransans/woff/IRANSansWeb.woff') format('woff'),
  url('./fonts/iransans/woff2/IRANSansWeb.woff2') format('woff2')
}

Upvotes: 1

Ravi Dhiman
Ravi Dhiman

Reputation: 36

I'm using Material-UI version 3.9.2. I found this work-around.

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'

const theme = createMuiTheme({
    palette: {
        primary: { main: '#228e22' },
        secondary: { main: '#4d4d4d' },
    },
    typography: {
        useNextVariants: true,
        fontFamily: '"Montserrat", Arial, Helvetica, sans-serif',
    },
})

const Base = () => (
   <MuiThemeProvider theme={theme}>
       <Typography component="h1" variant="h1">
           Hello
        </Typography>
    </MuiThemeProvider>
)

Upvotes: 2

bmaupin
bmaupin

Reputation: 16005

The other answers don't seem to work for Material-UI v1. Here's what worked for me:

import { createMuiTheme } from 'material-ui/styles';
import createPalette from 'material-ui/styles/palette';
import createTypography from 'material-ui/styles/typography';

const theme = createMuiTheme({
  typography: createTypography(createPalette(), {
    fontFamily: '"Comic Sans"',
  })
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>

Here's another example for overriding the font while using the dark theme:

const theme = (() => {
  const palette = createPalette({
    type: 'dark',
  });

  const typography = createTypography(palette, {
    fontFamily: '"Comic Sans"',
  });

  return createMuiTheme({
    palette: palette,
    typography: typography,
  });
})();

The typography documentation for v1 is here although I had trouble getting the example working: https://material-ui-1dab0.firebaseapp.com/customization/themes#typography

Upvotes: 11

Nick Brady
Nick Brady

Reputation: 6592

If you're just looking to change the font of your material-ui theme, change muiTheme in the MuiThemeProvider provider component. The docs have an example here: http://www.material-ui.com/#/customization/themes

Should look something like this:

App.css

/* Load in your font */
@import url('https://fonts.googleapis.com/css?family=Lato');

App.js

// App.js
import './App.css'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const font = "'Lato', sans-serif"; 

const muiTheme = getMuiTheme({
  fontFamily: font
});

function App(props) {
  return(
    <MuiThemeProvider muiTheme={muiTheme}>
      <div style={{fontFamily: font}}>...</div>
    </MuiThemeProvider>
  );
}

Note most of the components had to have their fonts updated, but I added fontFamily to the enclosing div (as seen above) as well in order for all to be updated (headers specifically for me).

If you're wondering what else you can override, it is probably easiest to just look at the code (https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js) where it is defined

Upvotes: 8

Brandon
Brandon

Reputation: 7966

I figured this out. I did 2 things, the first of which I don't think mattered:

I switched to using a full raw theme, then implementing in-component like this:

getChildContext: function() {
        return {
            muiTheme: ThemeManager.getMuiTheme(rawTheme)
        }
    },

The second thing, which was more likely the culprit, was escaping the space in 'PT Sans', as follows:

//theme.js
import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from 'material-ui/lib/styles/zIndex';

export default {
    spacing: Spacing,
    zIndex: zIndex,
    fontFamily: 'PT\ Sans',
    palette: {
        primary1Color: Colors.cyan500,
        primary2Color: Colors.cyan700,
        primary3Color: Colors.lightBlack,
        accent1Color: Colors.pinkA200,
        accent2Color: Colors.grey100,
        accent3Color: Colors.grey500,
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.cyan500,
    }
};

Voila, as mundane and uninteresting a bug as you could hope for.

Upvotes: 4

Related Questions