Update custom theme docs with info for fonts

Signed-off-by: James D <james@integratn.io>
2024-03-31 14:39:54 -06:00
parent fa512d2eec
commit e0d179771a
1 changed files with 82 additions and 0 deletions
@@ -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: