diff --git a/.changeset/grumpy-spies-flow.md b/.changeset/grumpy-spies-flow.md new file mode 100644 index 0000000000..6ce80285ee --- /dev/null +++ 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 index 435bd3fb8a..47a15127bd 100644 --- 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 index f64ce1af4a..79b2773268 100755 --- 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 index 61d4f62c78..c8cc4c1669 100644 --- 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) => ( - - ))} {fontWeights.map((weight) => ( <>

{weight}

@@ -164,29 +170,10 @@ export const FontFamily: Story = { render: (args) => { return ( <> - - - -

Pro

- -

3

- +

Source Sans Pro

+ +

Source Sans 3

+ ); }, diff --git a/@navikt/core/tokens/docs.json b/@navikt/core/tokens/docs.json index ca3451f9d9..8f80f835b6 100644 --- 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 index aa69a29cde..b8e03f6cc9 100644 --- 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: {