feat: Updated font support and definition (#3044)

* feat: Updated font definitions * memo: Changeset * stories adjustments --------- Co-authored-by: Halvor Haugan <[email protected]>
navikt · Aug 5, 2024 · 8fd183c · 8fd183c
1 parent 0b1ac4f
commit 8fd183c
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 37 deletions.
diff --git a/.changeset/grumpy-spies-flow.md b/.changeset/grumpy-spies-flow.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-tokens": minor
+"@navikt/ds-css": minor
+---
+
+Fonts: Added built-in support for cyrillic, cyrillic-ext and latin-ext
diff --git a/@navikt/core/css/baseline/baseline.css b/@navikt/core/css/baseline/baseline.css
@@ -17,7 +17,7 @@
 
 body,
 :host {
-  font-family: var(--a-font-family, "Source Sans Pro", Arial, sans-serif);
+  font-family: var(--a-font-family, "Source Sans 3", "Source Sans Pro", Arial, sans-serif);
   line-height: 1.333;
   font-size: 1.125rem;
 }

diff --git a/@navikt/core/css/baseline/fonts.css b/@navikt/core/css/baseline/fonts.css
@@ -1,28 +1,129 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-cyrillic-ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-cyrillic-ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Legacy support */
+
+/* latin-ext */
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400;
+  font-weight: 400 600;
   font-display: swap;
-  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
 }
+
+/* latin */
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 600;
+  font-weight: 400 600;
   font-display: swap;
-  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin-semibold.woff2") format("woff2");
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/italic-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* latin-ext */
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 400 600;
   font-display: swap;
-  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
 }
+
+/* latin */
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 600;
+  font-weight: 400 600;
   font-display: swap;
-  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3/normal-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/@navikt/core/react/src/typography/stories/font.stories.tsx b/@navikt/core/react/src/typography/stories/font.stories.tsx
@@ -118,6 +118,9 @@ export const Cyrillic: Story = {
     cyrillic: true,
     showDefault: false,
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const Samisk: Story = {
@@ -127,6 +130,9 @@ export const Samisk: Story = {
     samisk: true,
     showDefault: false,
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const Mixed: Story = {
@@ -136,15 +142,15 @@ export const Mixed: Story = {
     showDefault: false,
     mixed: true,
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const FontWeight: Story = {
   render: () => {
     return (
       <>
-        {fontWeights.map((weight) => (
-          <FontComponent key={weight} weight={weight} family="Source Sans 3" />
-        ))}
         {fontWeights.map((weight) => (
           <>
             <h2>{weight}</h2>
@@ -164,29 +170,10 @@ export const FontFamily: Story = {
   render: (args) => {
     return (
       <>
-        <FontComponent
-          weight={args.weight ?? 400}
-          family="Source Sans Pro"
-          mixed
-        />
-        <FontComponent
-          weight={args.weight ?? 400}
-          family="Source Sans 3"
-          mixed
-        />
-
-        <h2>Pro</h2>
-        <FontComponent
-          weight={args.weight ?? 400}
-          family="Source Sans Pro"
-          mixed
-        />
-        <h2>3</h2>
-        <FontComponent
-          weight={args.weight ?? 400}
-          family="Source Sans 3"
-          mixed
-        />
+        <h2>Source Sans Pro</h2>
+        <FontComponent weight={args.weight} family="Source Sans Pro" mixed />
+        <h2>Source Sans 3</h2>
+        <FontComponent weight={args.weight} family="Source Sans 3" mixed />
       </>
     );
   },

diff --git a/@navikt/core/tokens/docs.json b/@navikt/core/tokens/docs.json
@@ -56,7 +56,7 @@
   "font": [
     {
       "name": "--a-font-family",
-      "value": "'Source Sans Pro', Arial, sans-serif"
+      "value": "'Source Sans 3', 'Source Sans Pro', Arial, sans-serif"
     },
     { "name": "--a-font-weight-regular", "value": "400" },
     { "name": "--a-font-weight-bold", "value": "600" },

diff --git a/@navikt/core/tokens/src/index.js b/@navikt/core/tokens/src/index.js
@@ -22,7 +22,9 @@ module.exports = {
       },
     },
     font: {
-      family: { value: "'Source Sans Pro', Arial, sans-serif" },
+      family: {
+        value: "'Source Sans 3', 'Source Sans Pro', Arial, sans-serif",
+      },
       line: {
         height: {
           heading: {