feat: Load custom font for brands (#3248)

Author: vprothais

packages/orange/scss/tokens/_composite.scss

@@ -12,11 +12,18 @@ $ouds-elevation-raised: $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-
 $ouds-elevation-sticky: $ouds-elevation-x-sticky $ouds-elevation-y-sticky $ouds-elevation-blur-sticky $ouds-elevation-spread-sticky var(--#{$prefix}elevation-color-sticky) !default;
 // scss-docs-end ouds-composite-elevation
 
-// Font stacks
+// Font
+
+$custom-font-name: "HelvNeueOrange" !default;
+
+// Map of CDN URLs for custom font, with weight as keys
+$custom-font-cdn-urls: () !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
+  $custom-font-name,
   // Older macOS and iOS
   "Helvetica Neue",
   // Some Windows

packages/sosh/scss/tokens/_composite.scss

@@ -12,19 +12,21 @@ $ouds-elevation-raised: $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-
 $ouds-elevation-sticky: $ouds-elevation-x-sticky $ouds-elevation-y-sticky $ouds-elevation-blur-sticky $ouds-elevation-spread-sticky var(--#{$prefix}elevation-color-sticky) !default;
 // scss-docs-end ouds-composite-elevation
 
-// Font stacks
+// Font
+
+$custom-font-name: "Sosh" !default;
+
+// Map of CDN URLs for custom font, with weight as keys
+$custom-font-cdn-urls: (
+  $ouds-font-weight-system-web-moderate: "https://mastermedia.dam-broadcast.com/pm_12751_481_481818-a5ae2tmj13--Sosh-Medium.woff2",
+  $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:
-  // Older macOS and iOS
-  "Helvetica Neue",
-  // Some Windows
-  Helvetica,
-  // Safari for macOS and iOS
-  "SF Pro",
-  // Android
-  Roboto,
+  // Custom OUDS font
+  $custom-font-name,
   // Basic web fallback
   Arial,
   "Noto Sans",

scss/_root.scss

@@ -1,4 +1,14 @@
 // OUDS mod
+@each $weight, $url in $custom-font-cdn-urls {
+  @font-face {
+    font-family: $custom-font-name;
+    font-style: normal;
+    font-weight: $weight;
+    src: url("#{$url}") format("woff2");
+    font-display: swap;
+  }
+}
+
 #{$ouds-root-selector},
 [data-bs-theme] {
   color: var(--#{$prefix}color-local, var(--#{$prefix}color-content-default));