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

Expanding divisions vertically without the constraints of fixed heights

Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills. I have a st ...

htmlcss

What is the best way to ensure a div is always scrollable?

I am currently working with Angular 4 and Bootstrap 4 (alpha 6). I have implemented ngx-infinte-scroll to fetch data from the server when the user scrolls to the top or bottom of the div. The issue I am facing is that the user can only scroll when there ar ...

htmlcsstwitter-bootstrapangular

How about using a circle inset clip path technique?

Can a unique inset circle clip path be created to cut a hole through the center of a div instead of just showing the center? The entire div should be visible except for a hole cut out in the center to achieve a design similar to this: https://i.sstatic.n ...

csscss-shapesclip-path

Ways to remove scroll bars from a textarea in JavaFX

Is there a way to disable the scrollbars on a TextArea element? I managed to remove the horizontal scrollbar by using: TextArea.setWrapText(true); However, I am struggling to disable the vertical scrollbar - all I can do is hide it. My goal is to hav ...

javacssjavafx

iOS 8 home screen web apps with status bar overlay and footer bar integration

After installing a web application to 'home' and working with it, I noticed that a recent update to iOS has made the usual black status bar transparent and float above the web content below. In addition, there is an unseen horizontal bar at the ...

cssangularjssafariios8statusbar

Discovering the SVG path for Material UI Icons is simple with the React Icon Picker tool!

In my React application, I am working with Material UI's Icons and I have a specific goal in mind. I want to create an Icon Picker feature where users can choose a MUI Icon and the selected icon's SVG path is stored within the state. This SVG pa ...

reactjssvgiconsmaterial-ui

It appears that React is rendering all elements, but only the first one is being shown

I am currently working on a component: const StudentName = (student) => ( <div key={student.engName} test={console.log("Name: "+student.val().engName)}> <Typography className={ student==currentStudent ? 's ...

reactjsmaterial-uirender

Mastering the Bootstrap 'Thumbnail Grid System'

I'm having trouble aligning all the images in my design. Even though I'm using Bootstrap's column classes (class="col-sm-4 col-md-3"), they are not displaying equally. Here is a screen recording showcasing the issue: Click here to see the s ...

pythonhtmlcssjinja2

Ensuring the model accurately reflects the input's value attribute in AngularJS

I am in the process of creating a set of image "radio buttons" where only one can be selected per group. However, as a newcomer to Angular, I'm facing difficulties in maintaining the value and using it as my ng-model. Additionally, I am looking for a ...

javascripthtmlcssangularjs

Switch the CSS class with an HTML tag

Can someone help me transform this code snippet with Python 3 and Beautiful Soup? <span class="ld-nowrap"> 20th century’s </span> I need to convert it to: <em> 20th century’s </em> Any suggestions on how to achieve t ...

pythonhtmlcssbeautifulsoup

What method does the CSS standard dictate for measuring the width of an element?

In terms of measuring an element's width, Chrome appears to calculate it from the inner margin inclusive of padding. On the other hand, Firefox and IE determine the width of the box from the border, excluding padding but including the margin. Personal ...

cssinternet-explorerfirefoxgoogle-chromespecifications

Tips for disabling automatic sliding in Bootstrap 5 carousel specifically on larger screens

I am working with a Bootstrap 5 carousel that I need to configure to stop autosliding on large screens, but maintain autoslide functionality on mobile devices. Is there a way to achieve this using only HTML and CSS/SCSS? I am aware of the data-bs-interval ...

htmlcsssasscarouselbootstrap-5

Can the parent element containing this floated div also have text wrapping around it?

Hello there, I've been following along with this tutorial on CSS Positioning to enhance my understanding: . Everything was going smoothly until I reached step 7 and ran into a roadblock. In that step, the text "id = div-1" is supposed to be positioned ...

csscss-floatparent-child

Prevent key input in Material UI TextField

Is there a way to restrict users from manually inputting values into my Material UI TextField and instead, direct them to use the number stepper? I've attempted a solution without success. import React, { useState } from "react"; import Reac ...

reactjsmaterial-ui

Adjust the height of a div using jQuery once the AJAX call retrieves the data

There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery ca ...

javascriptjquerycssajax

Ways to create a fading effect for a div container

As I delve into learning Rails, I've been immersed in a Rails web app where there is an enticing "Order" button that triggers a response saying: "Thank you for ordering". This message is displayed using the flash action. To enhance user experience, my ...

jqueryhtmlcssruby-on-rails

Component for forms in React using Material-UI

Can anyone assist me with an issue I'm facing in retrieving data values from the formContent component? Your help would be greatly appreciated. Please refer to the linked Codesandbox for more information. Click here ...

reactjsformsvalidationmaterial-ui

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

htmlcsstwitter-bootstrapgrid-layout

Animation will begin once the page has finished loading

On the website, there is a master page along with several content pages. The desired effect is to have a fade-in animation when navigating between pages. Currently, when clicking on a link, the new page appears first and then starts fading out, but this sh ...

jqueryasp.netcss

Choose a dropdown menu that will show a specific text instead of the actual value

I am currently developing a project that relies on react and redux for implementation. My goal is to have the SelectField component show a string to users, but select the ID value when an option is chosen. With the use of material-ui 0.19.3v, I was able ...

reactjsreduxmaterial-ui