Skip to content

Commit 59c1195

Browse files
VesaJuvonenVesaJuvonen
committed
spfx font design package update
1 parent 6c57a01 commit 59c1195

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

‎docs/design/use-brand-center-fonts-in-spfx-components.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -142,25 +142,25 @@ With the web part on the page, select one of the custom fonts from the Brand cen
142142

143143
The following table lists all the available font slots from SharePoint brand center that developers can use in their custom SPFx components:
144144

145-
| Font slot | Custom Font Token | Default Token | Short Description | Used in Product Location |
145+
| Font slot | Custom Font Token | Fluent Design Tolen | Short Description | Used in Product Location |
146146
| ----------- | ----------------- | ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
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 | |
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 | |
164164

165165
> [!TIP]
166166
> Don't forget to include the `--fontFamily` prefix when using one of the custom font slot tokens in your style sheets.

0 commit comments

Comments
 (0)