Theming, added typefaces

pages/+page.svelte

@@ -43,7 +43,21 @@
   authors={pkg?.reuters?.graphic?.authors}
 />
 
-<Theme base="dark">
+<Theme
+  base="dark"
+  theme={{
+    font: {
+      family: {
+        serif: 'Sentient',
+        'sans-serif': "'Atkinson Hyperlegible Next'",
+        hed: 'Sentient',
+        subhed: 'Sentient',
+        body: "'Atkinson Hyperlegible Next'",
+        note: "'Atkinson Hyperlegible Next'",
+      },
+    },
+  }}
+>
   <!--   {#if !isReutersApp(page.url)}
     {#if isReutersDotcom(page.url)}
       <LeaderboardAd />

src/lib/styles/font-faces.scss

@@ -0,0 +1,43 @@
+/* Override package with local fonts (/src/statics/fonts) */
+@font-face {
+  font-family: 'Atkinson Hyperlegible Next';
+  src: url('/fonts/AtkinsonHyperlegibleNext-Variable.woff2') format('woff2');
+  font-weight: 200 800;
+  font-display: swap;
+}
+
+/* Source: https://www.fontshare.com/fonts/sentient */
+@font-face {
+  font-family: 'Sentient';
+  src: url('/fonts/SentientVariable.woff2') format('woff2');
+  font-weight: 200 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Sentient';
+  src: url('/fonts/SentientItalicVariable.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 200 700;
+  font-display: swap;
+}
+
+/* STRUCTURE Defines the font family variables and mixins to override RGC defaults
+*/
+:root {
+  --theme-font-family-sans-serif: 'Atkinson Hyperlegible Next', 'Source Sans Pro', Arial, Helvetica, sans-serif;
+  --theme-font-family-body: var(--theme-font-family-sans-serif);
+  --theme-font-family-note: var(--theme-font-family-sans-serif);
+  --theme-font-family-hed: 'Sentient', serif;
+  --theme-font-family-subhed: var(--theme-font-family-hed);
+  --theme-font-family-monospace: 'Droid Sans Mono', monospace;
+}
+
+/* NOTE We are trying to mimmick the the package mixin pattern here. To force a font in a specific rule: @include \!font-atkinson or use the package's forcing utility class. */
+@mixin font-atkinson {
+  font-family: 'Atkinson Hyperlegible Next', 'Source Sans Pro', Arial, Helvetica, sans-serif;
+}
+
+@mixin \!font-atkinson {
+  font-family: 'Atkinson Hyperlegible Next', 'Source Sans Pro', Arial, Helvetica, sans-serif !important;
+}

src/lib/styles/global.scss

@@ -2,3 +2,5 @@
 // You can use it to write styles for any elements on pages or embeds
 // and to override any defaults that are part of our house design system.
 @use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
+
+@use './font-faces.scss' as *;