What Is A+ Theme And Font Add-on Available For?

Typography

The theme provides a ready of type sizes that work well together, and also with the layout grid.

Font family

You can change the font family with the theme.typography.fontFamily property.

For example, this case uses the system font instead of the default Roboto font:

                          const              theme              =              createTheme              (              {              typography              :              {              fontFamily              :              [              '-apple-system'              ,              'BlinkMacSystemFont'              ,              '"Segoe UI"'              ,              'Roboto'              ,              '"Helvetica Neue"'              ,              'Arial'              ,              'sans-serif'              ,              '"Apple Color Emoji"'              ,              '"Segoe UI Emoji"'              ,              '"Segoe UI Symbol"'              ,              ]              .              join              (              ','              )              ,              }              ,              }              )              ;

Cocky-hosted fonts

To self-host fonts, download the font files in ttf, woff, and/or woff2 formats and import them into your code.

⚠️ This requires that y'all take a plugin or loader in your build procedure that can handle loading ttf, woff, and woff2 files. Fonts volition not be embedded inside your package. They will be loaded from your webserver instead of a CDN.

                          import              RalewayWoff2              from              './fonts/Raleway-Regular.woff2'              ;

Next, you need to change the theme to apply this new font. In society to globally ascertain Raleway every bit a font confront, the CssBaseline component can be used (or any other CSS solution of your option).

                          import              RalewayWoff2              from              './fonts/Raleway-Regular.woff2'              ;              const              theme              =              createTheme              (              {              typography              :              {              fontFamily              :              'Raleway, Arial'              ,              }              ,              components              :              {              MuiCssBaseline              :              {              styleOverrides              :                              `                                  @font-confront {           font-family: 'Raleway';           font-mode: 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;         }                                `                            ,              }              ,              }              ,              }              )              ;              // ...              return              (                                                <                  ThemeProvider                                theme                                  =                  {theme}                                >                                                              <                  CssBaseline                                />                                                              <                  Box                                sx                                  =                  {                  {                  fontFamily                  :                  'Raleway'                  ,                  }                  }                                >                            Raleway                                                </                  Box                                >                                                              </                  ThemeProvider                                >                            )              ;

Annotation that if you want to add additional @font-face up declarations, you lot need to apply the string CSS template syntax for adding fashion overrides, and so that the previosly defined @font-face declarations won't exist replaced.

MUI uses rem units for the font size. The browser <html> chemical element default font size is 16px, but browsers take an pick to change this value, so rem units allow us to conform the user's settings, resulting in a better accessibility back up. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly dissimilar in size and viewing distance.

To modify the font-size of MUI you tin provide a fontSize property. The default value is 14px.

                          const              theme              =              createTheme              (              {              typography              :              {              // In Chinese and Japanese the characters are unremarkably larger,              // so a smaller fontsize may be appropriate.              fontSize              :              12              ,              }              ,              }              )              ;

The computed font size past the browser follows this mathematical equation:

font size calculation

Responsive font sizes

The theme.typography.* variant backdrop map straight to the generated CSS. You tin can use media queries inside them:

                          const              theme              =              createTheme              (              )              ;              theme.typography.h3              =              {              fontSize              :              '1.2rem'              ,              '@media (min-width:600px)'              :              {              fontSize              :              '1.5rem'              ,              }              ,              [theme.breakpoints.              upwardly              (              'dr.'              )              ]              :              {              fontSize              :              'two.4rem'              ,              }              ,              }              ;

To automate this setup, you tin use the responsiveFontSizes() helper to make Typography font sizes in the theme responsive.

Y'all can run across this in action in the example below. Conform your browser's window size, and notice how the font size changes as the width crosses the unlike breakpoints:

                          import              {              createTheme,              responsiveFontSizes              }              from              '@mui/material/styles'              ;              permit              theme              =              createTheme              (              )              ;              theme              =              responsiveFontSizes              (theme)              ;

Fluid font sizes

To exist done: #15251.

HTML font size

You might want to change the <html> element default font size. For instance, when using the 10px simplification.

The theme.typography.htmlFontSize property is provided for this use instance, which tells MUI what the font-size on the <html> element is. This is used to conform the rem value so the calculated font-size always friction match the specification.

                          const              theme              =              createTheme              (              {              typography              :              {              // Tell MUI what'south the font-size on the html element is.              htmlFontSize              :              10              ,              }              ,              }              )              ;

                          html              {              font-size              :              62.5%;              /* 62.5% of 16px = 10px */              }

You lot demand to apply the higher up CSS on the html element of this page to see the below demo rendered correctly

Variants

The typography object comes with 13 variants by default:

h1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
push
caption
overline

Each of these variants can be customized individually:

                          const              theme              =              createTheme              (              {              typography              :              {              subtitle1              :              {              fontSize              :              12              ,              }              ,              body1              :              {              fontWeight              :              500              ,              }              ,              button              :              {              fontStyle              :              'italic'              ,              }              ,              }              ,              }              )              ;

Adding & disabling variants

In addition to using the default typography variants, you can add custom ones, or disable whatsoever y'all don't demand. Here is what y'all demand to exercise:

Footstep 1. Update the theme'south typography object

                          const              theme              =              createTheme              (              {              typography              :              {              poster              :              {              color              :              'red'              ,              }              ,              // Disable h3 variant              h3              :              undefined              ,              }              ,              }              )              ;

Step 2. Update the necessary typings (if you are using TypeScript)

You need to make sure that the typings for the theme's typography variants and the Typography'south variant prop reflects the new set of variants.

            declare module              '@mui/material/styles'              {              interface              TypographyVariants              {              poster:              React.CSSProperties;              }              // allow configuration using `createTheme`              interface              TypographyVariantsOptions              {              poster?              :              React.CSSProperties;              }              }              // Update the Typography's variant prop options              declare module              '@mui/material/Typography'              {              interface              TypographyPropsVariantOverrides              {              poster:              truthful              ;              h3:              false              ;              }              }

Step three. You can now utilise the new variant

                                                            <                  Typography                                variant                                  =                  "poster"                                >              poster                                  </                  Typography                                >                            ;              /* This variant is no longer supported */                                                <                  Typography                                variant                                  =                  "h3"                                >              h3                                  </                  Typography                                >                            ;

Default values

You can explore the default values of the typography using the theme explorer or by opening the dev tools console on this folio (window.theme.typography).