feat: Add Orange font-face for Helvetica Neue plus medium font weight (#3255)

Author: vprothais

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",

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,

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;

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;
         }

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/).
 
 <ScssDocs name="ouds-composite-font-sans-serif" file={`packages/${getConfig().brand}/scss/tokens/_composite.scss`} />
 
 This `font-family` is applied to the `<body>` 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.
 
 <ScssDocs name="ouds-composite-font-monospace" file={`packages/${getConfig().brand}/scss/tokens/_composite.scss`} />

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]]).

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

site/src/content/docs/migrations/migration.mdx

@@ -12,6 +12,10 @@ toc: true
 
 <hr />
 
+### Core
+
+- <span class="tag tag-small rounded-none tag-positive">New</span> 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

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-*`.
 
+<BrandSpecific brand="orange">
+<Callout type="warning">
+The medium font-weight can only be used with `label` and `body` [font references]([[docsref:/content/typography/#regular-texts]]).
+</Callout>
+
+<Example code={`<p class="fw-bold">Bold text.</p>
+<p class="fw-medium">Medium weight text.</p>
+<p class="fw-normal">Normal weight text.</p>`} />
+</BrandSpecific>
+
+<BrandSpecific brand="sosh">
 <Example code={`<p class="fw-bold">Bold text.</p>
 <p class="fw-normal">Normal weight text.</p>`} />
+</BrandSpecific>
 
 <BootstrapCompatibility>