From e0d179771ab414457b43aa4c367a22583725dd40 Mon Sep 17 00:00:00 2001 From: James D Date: Sun, 31 Mar 2024 14:39:54 -0600 Subject: [PATCH 1/5] Update custom theme docs with info for fonts Signed-off-by: James D --- docs/getting-started/app-custom-theme.md | 82 ++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 6ce70be063..2def5b8685 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -228,6 +228,88 @@ const myTheme = createUnifiedTheme({ }); ``` +## Custom Fonts +To add custom fonts, you first need to declare the font style following the @font-face syntax from [Mui 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. +```ts title="packages/app/src/theme/myTheme.ts" +import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2'; + +const myCustomFont = { + fontFamily: 'My-Custom-Font', + fontStyle: 'normal', + fontDisplay: 'swap', + fontWeight: 300, + src: ` + local('My-Custom-Font'), + url(${MyCustomFont}) format('woff2'), + `, +}, + +export const myTheme = createUnifiedTheme({ + fontFamily: 'My-Custom-Font', + components: { + MuiCssBaseline: { + styleOverrides: { + '@font-face': [myCustomFont], + }, + }, + }, +}; +``` +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. +```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'; + +const myCustomFont = { + fontFamily: 'My-Custom-Font', + fontStyle: 'normal', + fontDisplay: 'swap', + fontWeight: 300, + src: ` + local('My-Custom-Font'), + url(${MyCustomFont}) format('woff2'), + `, +}, + +const myAwesomeFont = { + fontFamily: 'My-Awesome-Font', + fontStyle: 'normal', + fontDisplay: 'swap', + fontWeight: 300, + src: ` + local('My-Awesome-Font'), + url(${myAwesomeFont}) format('woff2'), + `, +}, + +export const myTheme = createUnifiedTheme({ + fontFamily: 'My-Custom-Font', + components: { + MuiCssBaseline: { + styleOverrides: { + '@font-face': [myCustomFont, myAwesomeFont], + }, + }, + }, + ...createBaseThemeOptions({ + palette: palettes.light, + typography: { + ...defaultTypography, + htmlFontSize: 16, + fontFamily: 'My-Custom-Font', + h1: { + fontSize: 72, + fontWeight: 700, + marginBottom: 10, + fontFamily: 'My-Awesome-Font', + }, + }, + defaultPageTheme: 'home', + }), +}; +``` + + ## 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: From 7e10b292030ad9846dc4098327d6e18eaa78d528 Mon Sep 17 00:00:00 2001 From: James D Date: Sun, 31 Mar 2024 17:41:28 -0600 Subject: [PATCH 2/5] fix: use ` to resolve Vale errors Signed-off-by: James D --- docs/getting-started/app-custom-theme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 2def5b8685..819f57c061 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -229,7 +229,7 @@ const myTheme = createUnifiedTheme({ ``` ## Custom Fonts -To add custom fonts, you first need to declare the font style following the @font-face syntax from [Mui 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 declare the font style following the `@font-face` syntax from [Mui 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. ```ts title="packages/app/src/theme/myTheme.ts" import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2'; @@ -255,7 +255,7 @@ 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 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'; From ef6def3d188d488d5bd73169d8169059e8f319c4 Mon Sep 17 00:00:00 2001 From: James D <71669407+JamesAtIntegratnIO@users.noreply.github.com> Date: Mon, 1 Apr 2024 07:36:45 -0600 Subject: [PATCH 3/5] Update docs/getting-started/app-custom-theme.md Co-authored-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Signed-off-by: James D. <71669407+JamesAtIntegratnIO@users.noreply.github.com> Signed-off-by: James D --- docs/getting-started/app-custom-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 819f57c061..6a2f7b19ab 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -229,7 +229,7 @@ const myTheme = createUnifiedTheme({ ``` ## Custom Fonts -To add custom fonts, you first need to declare the font style following the `@font-face` syntax from [Mui 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 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. ```ts title="packages/app/src/theme/myTheme.ts" import MyCustomFont from '../assets/fonts/My-Custom-Font.woff2'; From 92407b0c86e916e56f6f9aaf20c66275c0560a22 Mon Sep 17 00:00:00 2001 From: James D Date: Mon, 1 Apr 2024 08:21:00 -0600 Subject: [PATCH 4/5] docs: add a little clarity + formatting Signed-off-by: James D --- docs/getting-started/app-custom-theme.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 6a2f7b19ab..b961bacef9 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -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: From 4ee5635c336865b021aacc3bb529397473adcc36 Mon Sep 17 00:00:00 2001 From: James D Date: Mon, 1 Apr 2024 08:52:01 -0600 Subject: [PATCH 5/5] docs: yarn prettier:fix Signed-off-by: James D --- docs/getting-started/app-custom-theme.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index b961bacef9..15fef0fb9a 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -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'), `, },