diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 8e6875c9bf..37a2869239 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -4,8 +4,8 @@
#root {
height: 100%;
width: 100%;
- font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
- 'Helvetica Neue', sans-serif;
+ font-family: var(--default-font-family, 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
+ 'Helvetica Neue', sans-serif);
padding: 0!important;
}
diff --git a/index.html b/index.html
index acb4a8839c..74a1b5f0a1 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
body {
background-color: var(--fill-color);
color: var(--neutral-foreground-rest);
- font-family: var(--body-font);
+ font-family: var(--default-font-family, var(--body-font));
padding: 24px 12px;
}
.right-align {
diff --git a/packages/mgt-components/src/components/base-person-card-section.scss b/packages/mgt-components/src/components/base-person-card-section.scss
index 15c060fd95..b5b3bd8d78 100644
--- a/packages/mgt-components/src/components/base-person-card-section.scss
+++ b/packages/mgt-components/src/components/base-person-card-section.scss
@@ -19,7 +19,6 @@ $font-color: var(--font-color, #323130);
}
.no-data {
- font-family: var(--default-font-family, 'Segoe UI');
font-style: normal;
font-weight: 600;
font-size: 14px;
diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss
index a6db792700..827dbe101b 100644
--- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss
+++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss
@@ -27,7 +27,6 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
.header {
margin: $agenda-header-margin;
- font-family: $font-family;
font-size: $agenda-header-font-size;
font-style: normal;
font-weight: 400;
@@ -69,7 +68,6 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
}
&-time-container {
- font-family: $font-family;
font-style: normal;
font-weight: 600;
font-size: 12px;
@@ -107,7 +105,6 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
}
&-subject {
- font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: $agenda-event-subject-font-size;
@@ -125,7 +122,6 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
.event {
&-location {
padding-inline-start: 3px;
- font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: $agenda-event-location-font-size;
diff --git a/packages/mgt-components/src/components/mgt-contact/mgt-contact.scss b/packages/mgt-components/src/components/mgt-contact/mgt-contact.scss
index 0fe1b102cc..922f2a86c1 100644
--- a/packages/mgt-components/src/components/mgt-contact/mgt-contact.scss
+++ b/packages/mgt-components/src/components/mgt-contact/mgt-contact.scss
@@ -54,7 +54,6 @@
.part__link {
color: $contact-link-color;
- font-family: $font-family;
font-size: 14px;
cursor: pointer;
text-overflow: ellipsis;
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss
index 988e732fa3..6ac9169acd 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss
@@ -27,7 +27,6 @@ $show-more-button-border-bottom-left-radius: var(
$progress-ring-size: var(--progress-ring-size, 24px);
:host {
- font-family: $font-family;
font-size: $font-size;
.title {
diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.scss b/packages/mgt-components/src/components/mgt-file/mgt-file.scss
index 3dbb11b2d9..a1783b489a 100644
--- a/packages/mgt-components/src/components/mgt-file/mgt-file.scss
+++ b/packages/mgt-components/src/components/mgt-file/mgt-file.scss
@@ -28,7 +28,6 @@ $line3-font-weight: var(--file-line3-font-weight, $font-weight);
$line3-text-transform: var(--file-line3-text-transform, initial);
:host {
- font-family: $font-family;
font-size: $font-size;
font-weight: $font-weight;
border: $file-border;
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss
index b1ba3c2b3b..b7915ac789 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss
@@ -37,7 +37,6 @@ $person-card-base-icons-left-spacing: var(
:host {
box-shadow: $person-card-box-shadow;
width: var(--mgt-flyout-set-width, 375px);
- font-family: $font-family;
overflow: hidden;
user-select: none;
border-radius: 8px;
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.scss b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
index 6e9a20e018..62f4f824a8 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.scss
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
@@ -40,7 +40,6 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
:host {
font-size: var(--default-font-size);
- font-family: var(--default-font-family);
.flyout {
[slot='anchor'] {
diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss
index 2aa13f9094..a8ad4c6ff8 100644
--- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss
+++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss
@@ -11,10 +11,8 @@
:host {
--max-height: var(--picker-max-height, 380px);
-
- font-family: $font-family;
- .picker {
+ .picker {
background-color: $picker-background-color;
}
}
diff --git a/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss b/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss
index 72235547d7..434aaa5546 100644
--- a/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss
+++ b/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss
@@ -20,7 +20,6 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
$task-icon-color: var(--task-icon-color, $ms-color-gray120);
:host {
- font-family: $font-family;
display: flex;
flex-direction: column;
color: $color;
@@ -57,7 +56,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
}
select {
- font-family: var(--default-font-family, 'Segoe UI');
font-size: var(--tasks-plan-title-font-size, 1.1em);
padding: var(--tasks-plan-title-padding, 5px);
border: none;
@@ -70,7 +68,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
}
.plan-title {
- font-family: var(--default-font-family, 'Segoe UI');
font-size: var(--tasks-plan-title-font-size, 1.1em);
padding: var(--tasks-plan-title-padding, 5px);
}
@@ -78,7 +75,7 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
.add-bar {
display: flex;
- .add-bar-item{
+ .add-bar-item {
flex: 1 1 auto;
}
}
@@ -470,7 +467,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
input {
flex: 1;
- font-family: var(--default-font-family, 'Segoe UI');
margin: var(--task-new-input-margin, 0 24px 0 16px);
padding: var(--task-new-input-padding, 6px);
font-size: var(--task-new-input-font-size, 14px);
@@ -527,7 +523,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
select,
input {
- font-family: $font-family;
font-size: 12px;
font-weight: 600;
border: var(--task-new-select-border, none);
@@ -563,7 +558,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
height: var(--tasks-new-button-height, 32px);
border-radius: 4px;
border: var(--tasks-new-button-border, solid 1px #e5e5e5);
- font-family: var(--default-font-family, 'Segoe UI');
font-size: 14px;
line-height: 20px;
}
diff --git a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.scss b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.scss
index 730a335d0b..2a5a267159 100644
--- a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.scss
+++ b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.scss
@@ -52,7 +52,6 @@ $task-new-dropdown-border-radius: var(--task-new-dropdown-border-radius, calc(va
padding: $tasks-padding;
border: $tasks-border;
border-radius: $tasks-border-radius;
- font-family: $font-family;
--skeleton-fill: var(--neutral-foreground-active);
diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
index bfbd89dfdb..4a82d0d514 100644
--- a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
+++ b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
@@ -12,8 +12,6 @@
:host {
--max-height: var(--taxonomy-picker-max-height, 380px);
- font-family: $font-family;
-
.picker {
background-color: $taxonomy-picker-background-color;
}
diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss
index 0c60345ce0..d616badf6b 100644
--- a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss
+++ b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss
@@ -10,8 +10,6 @@
@import './mgt-teams-channel-picker.theme';
:host {
- font-family: $font-family;
-
.container {
display: flex;
flex-direction: column;
@@ -48,7 +46,6 @@
.search-error-text,
.loading-text {
- font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
diff --git a/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss b/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss
index fcc3923941..aded26d900 100644
--- a/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss
+++ b/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss
@@ -11,14 +11,12 @@ $answer-border-radius: var(--answer-border-radius, 4px);
$answer-box-shadow: var(--answer-box-shadow, 0 3.2px 7.2px rgb(0 0 0 / 13.2%), 0 0.6px 1.8px rgb(0 0 0 / 10.8%));
$answer-border: var(--answer-border, none);
$answer-padding: var(--answer-padding, 10px);
-$font-family: var(--default-font-family);
.search-results {
scroll-margin: 100px;
}
.search-result-grid {
- font-family: $font-family;
font-size: 14px;
margin: 16px 4px;
display: grid;
@@ -27,7 +25,6 @@ $font-family: var(--default-font-family);
}
.search-result {
- font-family: var(--default-font-family);
font-size: 14px;
margin: 16px 4px;
}
diff --git a/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss b/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss
index ff98ae0de3..ef0e34e8b3 100644
--- a/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss
+++ b/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss
@@ -16,7 +16,6 @@ $arrow-options-btn-font-color: var(--arrow-options-button-font-color, var(--acce
:host {
position: relative;
- font-family: $font-family;
.header {
&::part(control) {
diff --git a/packages/mgt-components/src/styles/shared-styles.scss b/packages/mgt-components/src/styles/shared-styles.scss
index 7e586f26b4..17372bedd5 100644
--- a/packages/mgt-components/src/styles/shared-styles.scss
+++ b/packages/mgt-components/src/styles/shared-styles.scss
@@ -8,6 +8,18 @@
@import './shared-sass-variables';
$focus-ring-style: var(--focus-ring-style, auto);
+$font-family: var(
+ --default-font-family,
+ 'Segoe UI',
+ 'Segoe UI Web (West European)',
+ 'Segoe UI',
+ -apple-system,
+ 'BlinkMacSystemFont',
+ 'Roboto',
+ 'Helvetica Neue',
+ sans-serif
+);
+$font-size: var(--default-font-size, 14px);
:host([hidden]) {
display: none;
@@ -15,9 +27,9 @@ $focus-ring-style: var(--focus-ring-style, auto);
:host {
display: block;
+ font-family: $font-family;
+ font-size: $font-size;
- --default-font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, 'BlinkMacSystemFont', 'Roboto', 'Helvetica Neue', sans-serif;
- --default-font-size: 14px;
--theme-primary-color: #0078d7;
--theme-dark-color: #005a9e;
}
@@ -29,7 +41,7 @@ $focus-ring-style: var(--focus-ring-style, auto);
// ensure default is set for other browsers
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
outline-color: var(--focus-ring-color, -webkit-focus-ring-color);
-
+
// set the style of the focus ring
// this needs to be something other than auto in Firefox to use the custom color
outline-style: $focus-ring-style;
diff --git a/stories/samples/general.stories.js b/stories/samples/general.stories.js
index 86c011bd3c..625dca20d5 100644
--- a/stories/samples/general.stories.js
+++ b/stories/samples/general.stories.js
@@ -198,7 +198,11 @@ if(body) applyTheme('dark', body);
body {
background-color: var(--fill-color);
color: var(--neutral-foreground-rest);
- font-family: var(--body-font);
+ font-family: var(--default-font-family, var(--body-font));
+ /* Uncomment to change the default font family */
+ /* --default-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
+ /* Uncomment to change the fluent element font variable */
+ /* --body-font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
}
.custom-focus {
--focus-ring-color: red;