From 11d965ea4d3484aeb414557137d0e520f297a52c Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Mon, 16 Feb 2026 08:45:54 +0000 Subject: [PATCH 1/3] replaces freight text with newsreader text font --- src/components/Theme/Theme.mdx | 2 +- src/components/Theme/Theme.stories.svelte | 4 +- src/components/Theme/themes/common.js | 2 +- src/scss/fonts/_font-faces.scss | 134 +++++++++++++----- src/scss/tokens/text/_font-family.scss | 8 +- src/scss/tokens/text/mixins/_font-family.scss | 8 +- 6 files changed, 112 insertions(+), 46 deletions(-) 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; From 0f9248c794c404089a8c2ccdaa45279e9967f69c Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Mon, 16 Feb 2026 08:46:30 +0000 Subject: [PATCH 2/3] docs(changeset): Replaces FreightText with Newsreader Text font --- .changeset/tired-houses-retire.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tired-houses-retire.md diff --git a/.changeset/tired-houses-retire.md b/.changeset/tired-houses-retire.md new file mode 100644 index 00000000..bd524d6a --- /dev/null +++ b/.changeset/tired-houses-retire.md @@ -0,0 +1,5 @@ +--- +'@reuters-graphics/graphics-components': minor +--- + +Replaces FreightText with Newsreader Text font From 43e00c8699ce60eaa6578065bd59103b6e77a2c0 Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Mon, 16 Feb 2026 08:50:09 +0000 Subject: [PATCH 3/3] format --- src/scss/fonts/_font-faces.scss | 98 +++++++++++++++++++++++---------- 1 file changed, 70 insertions(+), 28 deletions(-) diff --git a/src/scss/fonts/_font-faces.scss b/src/scss/fonts/_font-faces.scss index 49fe78b1..4d56a151 100644 --- a/src/scss/fonts/_font-faces.scss +++ b/src/scss/fonts/_font-faces.scss @@ -172,8 +172,11 @@ /* NEWSREADER TEXT */ @font-face { 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'); + 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; @@ -181,8 +184,11 @@ @font-face { 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'); + 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; @@ -190,8 +196,11 @@ @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'); + 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; @@ -199,8 +208,11 @@ @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'); + 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; @@ -208,8 +220,11 @@ @font-face { 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'); + 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; @@ -217,8 +232,11 @@ @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'); + 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; @@ -226,8 +244,11 @@ @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'); + 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; @@ -235,8 +256,11 @@ @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'); + 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; @@ -244,8 +268,11 @@ @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'); + 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; @@ -253,8 +280,11 @@ @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'); + 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; @@ -262,8 +292,11 @@ @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'); + 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; @@ -271,8 +304,11 @@ @font-face { 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'); + 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; @@ -280,8 +316,11 @@ @font-face { 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'); + 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; @@ -289,8 +328,11 @@ @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'); + 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;