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

docs: add a little clarity + formatting

Browse Source 
Signed-off-by: James D <james@integratn.io>
This commit is contained in:
James D
2024-04-01 08:21:00 -06:00
parent ef6def3d18
commit 92407b0c86
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/getting-started/app-custom-theme.md
+9 -3
View File
@@ -229,7 +229,13 @@ const myTheme = createUnifiedTheme({
```
## Custom Fonts
To add custom fonts, you first need to 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 set the default font.
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/).
After that you can then utilize the `styleOverrides` of `MuiCssBaseline` under components to add a font to the `@font-face` array.
```ts title="packages/app/src/theme/myTheme.ts"
import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2';
@@ -255,7 +261,8 @@ export const myTheme = createUnifiedTheme({
},
};
```
If you want to utilize different 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';
@@ -309,7 +316,6 @@ export const myTheme = createUnifiedTheme({
};
```
## Overriding Backstage and Material UI components styles
When creating a custom theme you would be applying different values to component's CSS rules that use the theme object. For example, a Backstage component's styles might look like this: