paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 24 Packages Projects Releases Wiki Activity

docs: yarn prettier:fix

Browse Source 
Signed-off-by: James D <james@integratn.io>
This commit is contained in:
James D
2024-04-01 08:52:01 -06:00
parent 92407b0c86
commit 4ee5635c33
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/getting-started/app-custom-theme.md
+10 -9
View File
@@ -230,9 +230,9 @@ const myTheme = createUnifiedTheme({
## Custom Fonts
To add custom fonts, you first need to store the font so that it can be imported. We suggest creating the `assets/fonts` directory in your front-end application `src` folder.
To add custom fonts, you first need to store the font so that it can be imported. We suggest creating the `assets/fonts` directory in your front-end application `src` folder.
You can then declare the font style following the `@font-face` syntax from [Material UI Typography](https://mui.com/material-ui/customization/typography/).
You can then declare the font style following the `@font-face` syntax from [Material UI Typography](https://mui.com/material-ui/customization/typography/).
After that you can then utilize the `styleOverrides` of `MuiCssBaseline` under components to add a font to the `@font-face` array.
@@ -245,8 +245,8 @@ const myCustomFont = {
fontDisplay: 'swap',
fontWeight: 300,
src: `
local('My-Custom-Font'),
url(${MyCustomFont}) format('woff2'),
local('My-Custom-Font'),
url(${MyCustomFont}) format('woff2'),
`,
},
@@ -262,7 +262,8 @@ export const myTheme = createUnifiedTheme({
};
```
If you want to utilize different or multiple fonts, then you can set the top level `fontFamily` to what you want for your body, and then override `fontFamily` in `typography` to control fonts for various headings.
If you want to utilize different or multiple fonts, then you can set the top level `fontFamily` to what you want for your body, and then override `fontFamily` in `typography` to control fonts for various headings.
```ts title="packages/app/src/theme/myTheme.ts"
import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2';
import myAwesomeFont from '../assets/fonts/My-Awesome-Font.woff2';
@@ -273,8 +274,8 @@ const myCustomFont = {
fontDisplay: 'swap',
fontWeight: 300,
src: `
local('My-Custom-Font'),
url(${MyCustomFont}) format('woff2'),
local('My-Custom-Font'),
url(${MyCustomFont}) format('woff2'),
`,
},
@@ -284,8 +285,8 @@ const myAwesomeFont = {
fontDisplay: 'swap',
fontWeight: 300,
src: `
local('My-Awesome-Font'),
url(${myAwesomeFont}) format('woff2'),
local('My-Awesome-Font'),
url(${myAwesomeFont}) format('woff2'),
`,
},