diff --git a/src/components/Theme/Theme.mdx b/src/components/Theme/Theme.mdx index 0c7139ab..c821f5c2 100644 --- a/src/components/Theme/Theme.mdx +++ b/src/components/Theme/Theme.mdx @@ -38,7 +38,7 @@ Use the [theme builder](?path=/docs/components-theming-theme-builder--docs) to s base="dark" theme={{ colour: { accent: 'var(--tr-light-orange)' }, - font: { family: { hed: 'FreightText, serif' } }, + font: { family: { hed: '"Newsreader Text", serif' } }, }} > diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte index b00835a9..554fb833 100644 --- a/src/components/Theme/Theme.stories.svelte +++ b/src/components/Theme/Theme.stories.svelte @@ -37,7 +37,7 @@ base="dark" theme={{ colour: { accent: 'var(--tr-light-orange)' }, - font: { family: { hed: 'FreightText, serif' } }, + font: { family: { hed: '"Newsreader Text", serif' } }, }} > @@ -100,7 +100,7 @@ diff --git a/src/components/Theme/themes/common.js b/src/components/Theme/themes/common.js index 77bfb736..65af9e23 100644 --- a/src/components/Theme/themes/common.js +++ b/src/components/Theme/themes/common.js @@ -6,7 +6,7 @@ https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=320&minRatio= export default { font: { family: { - serif: 'FreightText, serif', + serif: '"Newsreader Text", serif', 'sans-serif': 'Knowledge, sans-serif', monospace: '"Droid Sans Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', diff --git a/src/scss/fonts/_font-faces.scss b/src/scss/fonts/_font-faces.scss index a80bfe90..49fe78b1 100644 --- a/src/scss/fonts/_font-faces.scss +++ b/src/scss/fonts/_font-faces.scss @@ -169,63 +169,129 @@ font-display: swap; } -/* FREIGHT TEXT */ +/* NEWSREADER TEXT */ @font-face { - font-family: 'FreightText'; - src: - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff2') - format('woff2'), - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff') - format('woff'); + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Bold.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { - font-family: 'FreightText'; - src: - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff2') - format('woff2'), - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff') - format('woff'); - font-weight: normal; + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraBoldItalic.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraBoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-BoldItalic.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraBold.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraBold.woff') format('woff'); + font-weight: bold; font-style: normal; font-display: swap; } @font-face { - font-family: 'FreightText'; - src: - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff2') - format('woff2'), - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff') - format('woff'); + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-LightItalic.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-LightItalic.woff') format('woff'); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-SemiBoldItalic.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-SemiBoldItalic.woff') format('woff'); + font-weight: 600; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Medium.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-MediumItalic.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-MediumItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-SemiBold.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-SemiBold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraLightItalic.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraLightItalic.woff') format('woff'); + font-weight: 200; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Italic.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Italic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { - font-family: 'FreightText'; - src: - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff2') - format('woff2'), - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff') - format('woff'); - font-weight: 300; + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Regular.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Regular.woff') format('woff'); + font-weight: normal; font-style: normal; font-display: swap; } @font-face { - font-family: 'FreightText'; - src: - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff2') - format('woff2'), - url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff') - format('woff'); - font-weight: 500; + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraLight.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Newsreader Text'; + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Light.woff2') format('woff2'), + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Light.woff') format('woff'); + font-weight: 300; font-style: normal; font-display: swap; } diff --git a/src/scss/tokens/text/_font-family.scss b/src/scss/tokens/text/_font-family.scss index e8aa7b50..0082cbf2 100644 --- a/src/scss/tokens/text/_font-family.scss +++ b/src/scss/tokens/text/_font-family.scss @@ -27,8 +27,8 @@ .font-knowledge { @include font-knowledge; } -.font-freight-text { - @include font-freight-text; +.font-newsreader-text { + @include font-newsreader-text; } .font-noto-sans-jp { @include font-noto-sans-jp; @@ -60,8 +60,8 @@ .\!font-knowledge { @include \!font-knowledge; } -.\!font-freight-text { - @include \!font-freight-text; +.\!font-newsreader-text { + @include \!font-newsreader-text; } .\!font-noto-sans-jp { @include \!font-noto-sans-jp; diff --git a/src/scss/tokens/text/mixins/_font-family.scss b/src/scss/tokens/text/mixins/_font-family.scss index 2b69f289..741a5d3f 100644 --- a/src/scss/tokens/text/mixins/_font-family.scss +++ b/src/scss/tokens/text/mixins/_font-family.scss @@ -25,8 +25,8 @@ @mixin font-knowledge { font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif; } -@mixin font-freight-text { - font-family: 'FreightText', serif; +@mixin font-newsreader-text { + font-family: 'Newsreader Text', serif; } @mixin font-noto-sans-jp { font-family: 'Noto Sans JP'; @@ -59,8 +59,8 @@ font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif !important; } -@mixin \!font-freight-text { - font-family: 'FreightText', serif !important; +@mixin \!font-newsreader-text { + font-family: 'Newsreader Text', serif !important; } @mixin \!font-noto-sans-jp { font-family: 'Noto Sans JP' !important;