Utilize a fresh font style and replace the font family components in @mui/material with the new

Looking to bring in a fresh font family stored in a fonts directory and replace the existing mui base font family.

import { responsiveFontSizes, createTheme } from '@mui/material';

import NEWFONTFAMILLY from '../fonts/something.otf'

const theme = responsiveFontSizes(
    createTheme({
        components: {
            MuiCssBaseline: {
                styleOverrides: {
                    fontFamily: [NEWFONTFAMILLY],
                },
            },
        },
    })
);

export default theme;

After using this code, I noticed that the mui font family is being applied instead of my custom one:

@font-face {
    font-family: 'NEWFONTFAMILLY';
    src: url(../fonts/something.otf) format('opentype');
}

* {
    font-family: 'NEWFONTFAMILLY';
}

Can anyone assist me with this issue?

I am working with @mui/material v5+

cssfontsmaterial-uifont-family

Answer №1

By following the guidelines outlined in MUI documentation, I successfully implemented the custom font feature:

I recommend using WOFF2 or WOFF file formats, as I'm not certain about the compatibility with OTF.

// Begin by importing your desired font file
import RalewayWoff2 from './fonts/Raleway-Regular.woff2';

const theme = createTheme({
  // Customize the theme's typography by setting a new fontFamily
  typography: {
    fontFamily: 'Raleway, Arial',
  },
  components: {
    MuiCssBaseline: {
     // Integrate font-face to MuiCssBaseline component
      styleOverrides: `
        @font-face {
          font-family: 'Raleway';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: local('Raleway'), local('Raleway-Regular'), url(${RalewayWoff2}) format('woff2');
          unicodeRange: 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;
        }
      `,
    },
  },
});

To apply the custom font, simply wrap the desired Component within the chosen theme:

return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Box
      sx={{
        fontFamily: 'Raleway',
      }}
    >
      Raleway
    </Box>
  </ThemeProvider>
);

Answer №2

Experiment with an alternative approach:

  customizeTheme({
    elements: {
      MuiCssBaseline: {
        extraStyles: {
          '@font-face': CUSTOMFONTFAMILY,
        },
      },
    },
  })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery effects move divs' margins consecutively

Check out my current setup I want to achieve a smooth image fade-in effect without any text displacement. Is there a specific alteration needed for the .fade-in element in order to accomplish this? ...

jqueryhtmlcss

Using WebDriver Selenium to choose an element within a table following another element

The webpage features a user details table with a functionality to delete users. To remove a user, I must select the row based on the username and then click the "Delete" button. The structure of the HTML table is as follows: <table id="tblUsersGrid" ce ...

cssseleniumxpathselenium-webdriver

Tips for displaying a refresh indicator while making an ajax call for refreshing data:

I have successfully implemented jQuery code that refreshes a specific div every 10 seconds without reloading the entire page. However, during this refresh process, the user does not visually perceive any changes happening in the browser. While there are n ...

javascriptjqueryhtmlcssajax

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

htmlcss

CSS form not aligning properly within wrapper div and appears to be floating outside of it

I am in the process of creating a website that includes a wrapper div containing a: -Header -Content -Footer The issue I am encountering is when I insert regular text into the content section, everything displays properly and the background stretches s ...

htmlcss

Sliding through HTML content

Unfortunately, I lack expertise in advanced HTML and CSS. After some investigation, I attempted to create a "content slider" similar to the one on the Redlight Traffic website (an anti-human trafficking organization). However, my efforts have been unsucces ...

javascripthtmlcssjscript

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

cssreactjs

Utilize the Material UI Grid component to extend the content of the second column all the way

Currently, I am utilizing the Grid component from material UI and specifically using the auto property for the initial column. Here is my setup: <Grid container className={classes.borderclass}> <Grid item xs={"auto"}> <Items /> ...

reactjsmaterial-ui

jqGrid is throwing an error: undefined is not recognized as a function

Currently, I am in the process of trying to display a basic grid on the screen. Following the instructions provided in the jqGrid wiki, I have linked and created scripts for the required files. One essential css file, jquery-ui-1.8.18.custom.css, was missi ...

javascriptjquerycssjqgrid

Adjust the content of an iframe based on the size of the screen

Hi there, I'm currently facing an issue with an ad that can't be resized. The support team suggested using two different ads - one for mobile and one for desktop. The dimensions of the ads are 720 x 90 and 300 x 100. I would like the ad to automa ...

javascriptjquerycssiframeads

Wordpress Sub-Menu Being Eclipsed by Banner

After upgrading my Wordpress to version 3.5.1, I noticed a problem on my site where the Submenus are loading but quickly getting hidden behind the Banner. Despite trying various modifications in the CSS file, the issue remains unresolved (and might have wo ...

csswordpressmenu

Why isn't the AngularJS injected view resizing to fit the container?

As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...

javascripthtmlcssangularjs

How to position preloader at the center in materializeCSS

Given this situation: I attempted to implement this Preloader with position:fixed and centered. My approach was as follows: .loader { position:fixed; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); } <link rel="stylesheet" href="h ...

htmlcssmaterialize

Display an Open Dialog window when a Button is clicked

On a button click, I need to display an Open Dialog box. To achieve this, I am utilizing the FileUpload control for file uploading purposes, however, I prefer not to expose it to the user and would rather display a Button instead. ...

jquerycssfile-upload

When adding text to a React Material UI Box, it can sometimes extend beyond the boundaries

I'm currently working on a straightforward React page, but I've encountered an issue right from the start: my text is overflowing the box and I can't figure out why. Could someone take a look at my styles? Here's a picture showing the ...

cssreactjsmaterial-ui

Tips on how to add spacing between list items in React Material design

I am currently learning React Material and I am facing an issue with creating space between each row in a React Material List. Despite going through the documentation, I am unable to figure out how to achieve this as I am relatively new to React. My attem ...

reactjsreact-hooksreact-reduxmaterial-ui

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

I am currently working on aligning a <Button> from the Material UI library so that it is positioned at the same height as the <TextField> next to it and perfectly aligned with that field. Both the <Button> and the <TextField> are e ...

cssreactjsmaterial-ui

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

After upgrading the version of @testing-library/jest-dom from 4.0.0 to 4.2.0, the React test case started to encounter failures

After upgrading the version of @testing-library/jest-dom from 4.0.0 to 4.2.0, there seems to be an issue with react test cases that use toHaveStyles to check styles. Using react-testing-library: test('renders component', () => { const { getBy ...

reactjsjestjsmaterial-uireact-testing-library

Click to enlarge the text on button press

Recently, I've been working on a project involving a table that has a button at the end. My goal is to double the text size of the rows in the table when the button is clicked. As someone who is new to JQuery, this question may sound basic but any hel ...

jquerycss