diff --git a/packages/orange/scss/tokens/_composite.scss b/packages/orange/scss/tokens/_composite.scss
index a94d826487..e44b44b080 100644
--- a/packages/orange/scss/tokens/_composite.scss
+++ b/packages/orange/scss/tokens/_composite.scss
@@ -14,15 +14,19 @@ $ouds-elevation-sticky: $ouds-elevation-x-sticky $ouds-elevation-y-sticky $ouds-
// Font
+// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
+// scss-docs-start ouds-composite-font-sans-serif
$custom-font-name: "HelvNeueOrange" !default;
// Map of CDN URLs for custom font, with weight as keys
-$custom-font-cdn-urls: () !default;
+$custom-font-cdn-urls: (
+ $ouds-font-weight-system-web-default: "https://mastermedia.dam-broadcast.com/pm_12751_490_490071-myaimdgylf--HelveticaNeue-Default.woff2",
+ $ouds-font-weight-system-web-moderate: "https://mastermedia.dam-broadcast.com/pm_12751_490_490074-tqtijgs7e4--HelveticaNeue-Moderate.woff2",
+ $ouds-font-weight-system-web-strong: "https://mastermedia.dam-broadcast.com/pm_12751_490_490077-wejriti88u--HelveticaNeue-Strong.woff2"
+) !default;
-// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
-// scss-docs-start ouds-composite-font-sans-serif
$ouds-font-family-sans-serif-stack:
- // Custom OUDS font
+ // OUDS custom font
$custom-font-name,
// Older macOS and iOS
"Helvetica Neue",
diff --git a/packages/sosh/scss/tokens/_composite.scss b/packages/sosh/scss/tokens/_composite.scss
index 70a04c755e..5b2aa44917 100644
--- a/packages/sosh/scss/tokens/_composite.scss
+++ b/packages/sosh/scss/tokens/_composite.scss
@@ -14,6 +14,8 @@ $ouds-elevation-sticky: $ouds-elevation-x-sticky $ouds-elevation-y-sticky $ouds-
// Font
+// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
+// scss-docs-start ouds-composite-font-sans-serif
$custom-font-name: "Sosh" !default;
// Map of CDN URLs for custom font, with weight as keys
@@ -22,10 +24,8 @@ $custom-font-cdn-urls: (
$ouds-font-weight-system-web-strong: "https://mastermedia.dam-broadcast.com/pm_12751_481_481815-qd9nelrt7o--Sosh-Bold.woff2"
) !default;
-// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after
-// scss-docs-start ouds-composite-font-sans-serif
$ouds-font-family-sans-serif-stack:
- // Custom OUDS font
+ // OUDS custom font
$custom-font-name,
// Basic web fallback
Arial,
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 92a7d3cb0e..b12201cc6a 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -120,7 +120,8 @@ $ouds-font-sizes: (
$ouds-font-weights: (
normal: $ouds-font-weight-system-web-default,
- bold: $ouds-font-weight-system-web-strong
+ medium: $ouds-font-weight-system-web-moderate,
+ bold: $ouds-font-weight-system-web-strong,
) !default;
$ouds-icon-sizes: ("small", "medium", "large") !default;
diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
index 68ad35ff7a..320901b115 100644
--- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
+++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -3500,6 +3500,10 @@ $utilities: ();
font-weight: 400 !important;
}
+ .fw-medium {
+ font-weight: 500 !important;
+ }
+
.fw-bold {
font-weight: 700 !important;
}
@@ -14315,6 +14319,10 @@ $utilities: ();
font-weight: 400 !important;
}
+ .fw-medium {
+ font-weight: 500 !important;
+ }
+
.fw-bold {
font-weight: 700 !important;
}
diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx
index 5582acd83b..5472fdc6db 100644
--- a/site/src/content/docs/content/reboot.mdx
+++ b/site/src/content/docs/content/reboot.mdx
@@ -50,14 +50,17 @@ The `:root` and child elements are updated to provide better page-wide defaults.
- The `:root` children also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the `:root` children has a declared `background-color`, defaulting to `#fff`.
-## Native font stack
+## Font stack
+OUDS Web uses custom fonts loaded from a CDN, to ensure optimum text rendering on every device and OS, and to benefit from the browser's cache.
-OUDS Web utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today’s devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
+OUDS Web utilizes a “native font stack” or “system font stack” — as a fallback for custom font — for optimum text rendering on every device and OS. These system fonts have been designed specifically with today’s devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
This `font-family` is applied to the `` and automatically inherited globally throughout OUDS Web. To switch the global `font-family`, update `$font-family-base` and recompile OUDS Web.
+The font faces are generated directly in the `_root.scss` file, based on the `$custom-font-cdn-urls` map variable. You can customize these URLs if needed (for example, to avoid loading resources from the Internet).
+
The following `font-family` is applied on every code basis element. To switch the global `font-family`, update `$font-family-code` and recompile OUDS Web.
diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx
index 7b2c904217..07d21401ac 100644
--- a/site/src/content/docs/content/typography.mdx
+++ b/site/src/content/docs/content/typography.mdx
@@ -10,7 +10,7 @@ toc: true
OUDS Web sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]([[docsref:/utilities/text]]).
-- Use a [native font stack]([[docsref:/content/reboot#native-font-stack]]) that selects the best `font-family` for each OS and device.
+- Use a [font stack]([[docsref:/content/reboot#font-stack]]) of a custom font with native fonts fallback that selects the best `font-family` for each OS and device.
- For a more inclusive and accessible type scale, we use the browser’s default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `:root` children.
- Use `max-width` on all font references for readability reasons. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]([[docsref:/utilities/sizing]]).
diff --git a/site/src/content/docs/migrations/migration-from-boosted.mdx b/site/src/content/docs/migrations/migration-from-boosted.mdx
index 08366dd0f9..e8ebfa27e6 100644
--- a/site/src/content/docs/migrations/migration-from-boosted.mdx
+++ b/site/src/content/docs/migrations/migration-from-boosted.mdx
@@ -42,13 +42,15 @@ From now on, OUDS Web won’t embed Bootstrap elements that are not part of Oran
## Fonts
-OUDS Web doesn’t use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be slightly different depending on the operating system and browser being used.
+OUDS Web doesn’t provide Helvetica Neue font files. Instead, it loads the font from a CDN in order to share the cached files between every project using OUDS Web.
Technically, it means that you can get rid of the following things:
- Helvetica Neue woff2 files: `fonts/HelvNeue55_W1G.woff2`, `fonts/HelvNeue75_W1G.woff2`, `fonts/HelveticaNeueW20-55Roman.woff2`, and `fonts/HelveticaNeueW20-75Bold.woff2`.
- `orange-helvetica.*.css` file (default, RTL, or minified version).
- If you were customizing your Sass compilation, you can remove the `@import "orange-helvetica";` line from your Sass files if it was there.
+Read more about the [font stack]([[docsref:/content/reboot#font-stack]]) for more details.
+
## Content styles
### Typography
diff --git a/site/src/content/docs/migrations/migration.mdx b/site/src/content/docs/migrations/migration.mdx
index 40d888f7e9..a66b1e3d90 100644
--- a/site/src/content/docs/migrations/migration.mdx
+++ b/site/src/content/docs/migrations/migration.mdx
@@ -12,6 +12,10 @@ toc: true
+### Core
+
+- New OUDS Web now uses custom fonts loaded from a CDN for consistency in visual rendering across environments. Read more about the [font stack]([[docsref:/content/reboot#font-stack]]).
+
### Forms
#### Checkboxes
diff --git a/site/src/content/docs/utilities/text.mdx b/site/src/content/docs/utilities/text.mdx
index 8ef09cdf7e..4638683714 100644
--- a/site/src/content/docs/utilities/text.mdx
+++ b/site/src/content/docs/utilities/text.mdx
@@ -150,8 +150,20 @@ Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
Quickly change the `font-weight` of text with these utilities. `font-weight` utilities are abbreviated as `.fw-*`.
+
+
+The medium font-weight can only be used with `label` and `body` [font references]([[docsref:/content/typography/#regular-texts]]).
+
+
+Bold text.
+Medium weight text.
+Normal weight text.
`} />
+
+
+
Bold text.
Normal weight text.
`} />
+