|
| 1 | +--- |
| 2 | +title: Use SharePoint brand center fonts in SharePoint Framework solutions |
| 3 | +description: Developers can use the fonts defined in Brand center in their SharePoint Framework (SPFx) components. This article demonstrates how you can use the fonts defined in the SharePoint brand center in your SPFx components. |
| 4 | +ms.date: 08/10/2024 |
| 5 | +ms.localizationpriority: high |
| 6 | +--- |
| 7 | + |
| 8 | +# Use SharePoint brand center fonts in SharePoint Framework solutions |
| 9 | + |
| 10 | +The [SharePoint brand center](/sharepoint/brand-center-overview) offers a centralized branding management application that empowers your brand managers or designated brand owners to help your organization to customize the look and feel of their experiences. This brand asset management system allows customers to manage the colors, fonts, and images, and other assets all in one place. |
| 11 | + |
| 12 | +Developers can use the fonts defined in Brand center in their SharePoint Framework (SPFx) components. This article demonstrates how you can use the fonts defined in the SharePoint brand center in your SPFx components. |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | +In this article, learn how you can modify your SPFx components to use the same fonts set in the |
| 17 | + |
| 18 | +## Use SharePoint brand center fonts in SPFx components |
| 19 | + |
| 20 | +Start by creating a new SharePoint Framework component, such as a web part. |
| 21 | + |
| 22 | +> [!TIP] |
| 23 | +> To learn how to create your first SPFx web part, see [Build your first SharePoint client-side web part (Hello World part 1)](../spfx/web-parts/get-started/build-a-hello-world-web-part.md). |
| 24 | +
|
| 25 | +Within the web part, locate and open the **\*.module.scss** file in the project. For example, if you created a web part named *Hello World", the file will be found in the following ___location in the project: **./src/webparts/helloWorld/HelloWorldWebPart.module.scss**. |
| 26 | + |
| 27 | +This file contains the styles for the SPFx component. |
| 28 | + |
| 29 | +All fonts defined within Brand center are referenced using variables following the naming convention `--fontFamilyCustomFont###`. All start with the prefix `--fontFamily` followed by the *font slot* name. |
| 30 | + |
| 31 | +For example, to change the primary font in your web part, add the following style to the `.helloWorld` class: |
| 32 | + |
| 33 | +```css |
| 34 | +font-family: var(--fontFamilyCustomFont100, var(--fontFamilyBase)); |
| 35 | +``` |
| 36 | + |
| 37 | +This tells the SPFx runtime to set the `font-family` style to the variable `--fontFamilyCustomFont100`, but if that value isn't set, it will default to the `--fontFamilyBase` slot. |
| 38 | + |
| 39 | +The resulting class will now look like this: |
| 40 | + |
| 41 | +```css |
| 42 | +.helloWorld { |
| 43 | + font-family: var(--fontFamilyCustomFont100, var(--fontFamilyBase)); |
| 44 | + overflow: hidden; |
| 45 | + padding: 1em; |
| 46 | + color: "[theme:bodyText, default: #323130]"; |
| 47 | + color: var(--bodyText); |
| 48 | + &.teams { |
| 49 | + font-family: $ms-font-family-fallbacks; |
| 50 | + } |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | +Next, repeat this step for any other classes in our style where you want to apply these changes. For example, in the default web part, you'd update the `.welcome` and `.links.a` styles as well, so the resulting **\*.scss** file will look like the following: |
| 55 | + |
| 56 | +```css |
| 57 | +@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'; |
| 58 | + |
| 59 | +.helloWorld { |
| 60 | + font-family: var(--fontFamilyCustomFont100, var(--fontFamilyBase)); |
| 61 | + overflow: hidden; |
| 62 | + padding: 1em; |
| 63 | + color: "[theme:bodyText, default: #323130]"; |
| 64 | + color: var(--bodyText); |
| 65 | + &.teams { |
| 66 | + font-family: $ms-font-family-fallbacks; |
| 67 | + } |
| 68 | +} |
| 69 | + |
| 70 | +.welcome { |
| 71 | + text-align: center; |
| 72 | + font-family: var(--fontFamilyCustomFont100, var(--fontFamilyBase)); |
| 73 | +} |
| 74 | + |
| 75 | +.welcomeImage { |
| 76 | + width: 100%; |
| 77 | + max-width: 420px; |
| 78 | +} |
| 79 | + |
| 80 | +.links { |
| 81 | + a { |
| 82 | + font-family: var(--fontFamilyCustomFont100, var(--fontFamilyBase)); |
| 83 | + text-decoration: none; |
| 84 | + color: "[theme:link, default:#03787c]"; |
| 85 | + color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only |
| 86 | + |
| 87 | + &:hover { |
| 88 | + text-decoration: underline; |
| 89 | + color: "[theme:linkHovered, default: #014446]"; |
| 90 | + color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only |
| 91 | + } |
| 92 | + } |
| 93 | +} |
| 94 | +``` |
| 95 | + |
| 96 | +### Test the web part |
| 97 | + |
| 98 | +To test the web part, start the local web browser, but don't launch a browser to the hosted workbench. |
| 99 | + |
| 100 | +1. Run the command **gulp serve** from the root of the project and include the **--nobrowser** argument: |
| 101 | + |
| 102 | + ```console |
| 103 | + gulp serve --nobrowser |
| 104 | + ``` |
| 105 | + |
| 106 | + > [!IMPORTANT] |
| 107 | + > The SharePoint hosted workbench does not support custom fonts defined in the SharePoint brand center. To test your web parts, you'll need to test them on a page in a SharePoint site. |
| 108 | + |
| 109 | +1. In the console, the **gulp serve** command will output a line that looks similar to the following: |
| 110 | + |
| 111 | + ```text |
| 112 | + [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true#debugManifestsFile=https://localhost:4321/temp/manifests.js |
| 113 | + ``` |
| 114 | + |
| 115 | +1. Open the browser and navigate to a page that you have permission to add a web part to the page. |
| 116 | +1. Add the query string from the preceding console message to the URL and load the page. |
| 117 | + |
| 118 | + When prompted in the **Allow debug scripts** dialog, select **Load debug scripts**. |
| 119 | + |
| 120 | +1. Next, put the page into edit mode and add your sample web part to the page. |
| 121 | +1. Finally, publish the changes. |
| 122 | + |
| 123 | +With the web part on the page, select one of the custom fonts from the Brand center site: |
| 124 | + |
| 125 | +1. Select the gear icon in the top right of the Microsoft 365 suite bar, then select **Change the look**. |
| 126 | + |
| 127 | +  |
| 128 | + |
| 129 | +1. On the **Change the look** panel, select **Font (preview)**. |
| 130 | + |
| 131 | +  |
| 132 | + |
| 133 | +1. On the **Font (preview)** panel, select one of the fonts to view the changes on your web part. |
| 134 | + |
| 135 | +  |
| 136 | + |
| 137 | + Notice the fonts on the page will change, including those in our custom web part: |
| 138 | + |
| 139 | +  |
| 140 | + |
| 141 | +## Brand central font slot reference |
| 142 | + |
| 143 | +The following table lists all the available font slots from SharePoint brand center that developers can use in their custom SPFx components: |
| 144 | + |
| 145 | +| Font slot | Custom Font Token | Default Token | Short Description | Used in Product Location | |
| 146 | +| ----------- | ----------------- | ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | |
| 147 | +| Body | customFont100 | .caption2 | Caption small | | |
| 148 | +| Body | customFont200 | .caption2Strong | Caption medium | News Badge, Image caption, Site WP activity, Avatar Role/Job, Hero Badge | |
| 149 | +| Body | customFont300 | .caption1 | Caption large | Image Overlay | |
| 150 | +| Interactive | customFont400 | .caption1Strong | Label small | Avatar link | |
| 151 | +| Interactive | customFont500 | .caption1Stronger | Label medium | Footer links, Top Navigation links, Hub navigation links, Left navigation, Hero button | |
| 152 | +| Interactive | customFont600 | .body1 | Label large | Button | |
| 153 | +| Body | customFont700 | .body1Strong | Paragraph small | Quick links description, News sub description, Site web part information, Site web part description, Avatar name, Avatar description | |
| 154 | +| Body | customFont800 | .body1Stronger | Paragraph medium | News description, RTE Normal, RTE Table Cell, Hero Description | |
| 155 | +| Body | customFont900 | .body2 | Paragraph large | | |
| 156 | +| Headline | customFont1000 | .subtitle2 | Heading extra small | News subtitle, RTE H4, RTE Table Header, RTE, Table Column, Site WP site title, Call to action text, Hero call to action | |
| 157 | +| Headline | customFont1100 | .subtitle2Stronger | Heading small | Quick Links title, News title, Footer title, RTE H3, RTE Pull quote, Section heading, Hero title, Hero small tile title | |
| 158 | +| Headline | customFont1200 | .subtitle1 | Heading medium | RTE H2, Hero title large | |
| 159 | +| Headline | customFont1300 | .title3 | Heading large | Web part title, Hero tile title | |
| 160 | +| Headline | customFont1400 | .title2 | Heading extra large | | |
| 161 | +| Title | customFont1500 | .title1 | Title small | Hub title | |
| 162 | +| Title | customFont1600 | .largeTitle | Title medium | Page title, Site title | |
| 163 | +| Title | customFont1700 | .display | Title large | | |
| 164 | + |
| 165 | +> [!TIP] |
| 166 | +> Don't forget to include the `--fontFamily` prefix when using one of the custom font slot tokens in your style sheets. |
| 167 | + |
| 168 | +## See also |
| 169 | + |
| 170 | +- Video: [Using SharePoint Brand center font settings in custom SPFx solutions](https://www.youtube.com/watch?v=IP19PeHb0Zg) |
0 commit comments