12. When Providing the Default Font Type for a File Why Do We List More Than One Font Family?
Typography
The theme provides a set of type sizes that piece of work well together, and also with the layout filigree.
Font family
You can change the font family with the theme.typography.fontFamily property.
For instance, this example uses the organisation 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"' , ] . bring together ( ',' ) , } , } ) ; Self-hosted fonts
To cocky-host fonts, download the font files in ttf, woff, and/or woff2 formats and import them into your lawmaking.
⚠️ This requires that you have a plugin or loader in your build procedure that can handle loading ttf, woff, and woff2 files. Fonts will not be embedded within your packet. They will be loaded from your webserver instead of a CDN.
import RalewayWoff2 from './fonts/Raleway-Regular.woff2' ; Next, you lot need to change the theme to utilise this new font. In order to globally ascertain Raleway every bit a font face up, the CssBaseline component tin can be used (or whatever other CSS solution of your choice).
import RalewayWoff2 from './fonts/Raleway-Regular.woff2' ; const theme = createTheme ( { typography : { fontFamily : 'Raleway, Arial' , } , components : { MuiCssBaseline : { styleOverrides : ` @font-face { font-family: 'Raleway'; font-manner: 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 together additional @font-confront declarations, you need to use the string CSS template syntax for calculation style overrides, and then that the previosly defined @font-confront declarations won't be replaced.
Font size
MUI uses rem units for the font size. The browser <html> element default font size is 16px, merely browsers accept an option to change this value, so rem units allow united states to accommodate the user's settings, resulting in a better accessibility support. Users alter font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can exist vastly different in size and viewing distance.
To alter the font-size of MUI you tin provide a fontSize holding. The default value is 14px.
const theme = createTheme ( { typography : { // In Chinese and Japanese the characters are usually larger, // so a smaller fontsize may exist advisable. fontSize : 12 , } , } ) ; The computed font size by the browser follows this mathematical equation:
Responsive font sizes
The theme.typography.* variant backdrop map directly to the generated CSS. Yous can use media queries inside them:
const theme = createTheme ( ) ; theme.typography.h3 = { fontSize : 'ane.2rem' , '@media (min-width:600px)' : { fontSize : '1.5rem' , } , [theme.breakpoints. up ( 'md' ) ] : { fontSize : '2.4rem' , } , } ; To automate this setup, you lot can utilise the responsiveFontSizes() helper to make Typography font sizes in the theme responsive.
You can come across this in action in the case below. Adapt your browser'due south window size, and notice how the font size changes every bit the width crosses the dissimilar breakpoints:
import { createTheme, responsiveFontSizes } from '@mui/material/styles' ; let theme = createTheme ( ) ; theme = responsiveFontSizes (theme) ; Fluid font sizes
To exist done: #15251.
HTML font size
Yous might want to change the <html> chemical element default font size. For example, when using the 10px simplification.
⚠️ Changing the font size can harm accessibility ♿️. Well-nigh browsers agreed on the default size of 16px, just the user tin can modify it. For instance, someone with an impaired vision could have set their browser'south default font size to something larger.
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 and then the calculated font-size always match the specification.
const theme = createTheme ( { typography : { // Tell MUI what's the font-size on the html element is. htmlFontSize : ten , } , } ) ; html { font-size : 62.5%; /* 62.5% of 16px = 10px */ } Y'all need to apply the above CSS on the html chemical element of this folio 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
- button
- explanation
- overline
Each of these variants can exist 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 tin add custom ones, or disable any you lot don't need. Here is what you need to exercise:
Pace 1. Update the theme's typography object
const theme = createTheme ( { typography : { poster : { color : 'ruby-red' , } , // Disable h3 variant h3 : undefined , } , } ) ; Step 2. Update the necessary typings (if you lot are using TypeScript)
If you aren't using TypeScript you should skip this step.
You demand to make sure that the typings for the theme's typography variants and the Typography's variant prop reflects the new set of variants.
declare module '@mui/cloth/styles' { interface TypographyVariants { poster: React.CSSProperties; } // allow configuration using `createTheme` interface TypographyVariantsOptions { poster? : React.CSSProperties; } } // Update the Typography'south variant prop options declare module '@mui/material/Typography' { interface TypographyPropsVariantOverrides { poster: true ; h3: faux ; } } Step 3. You can now use the new variant
< Typography variant = "affiche" > 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 page (window.theme.typography).
Source: https://mui.com/customization/typography/
0 Response to "12. When Providing the Default Font Type for a File Why Do We List More Than One Font Family?"
Post a Comment