wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #392 from reuters-graphics/newsreader-font

Browse source 
Newsreader font
This commit is contained in:
Jon McClure 2026-02-16 08:53:30 +00:00 committed by GitHub
commit 760542b3a1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 144 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tired-houses-retire.md Normal file
View file

@ -0,0 +1,5 @@
---
'@reuters-graphics/graphics-components': minor
---
Replaces FreightText with Newsreader Text font

2
src/components/Theme/Theme.mdx
View file

@ -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' } },
}}
>
<!-- Page content -->

4
src/components/Theme/Theme.stories.svelte
View file

@ -37,7 +37,7 @@
base="dark"
theme={{
colour: { accent: 'var(--tr-light-orange)' },
font: { family: { hed: 'FreightText, serif' } },
font: { family: { hed: '"Newsreader Text", serif' } },
}}
>
<ThemedPage />
@ -100,7 +100,7 @@
<Theme
theme={{
colour: { background: 'steelblue', 'text-primary': '#fff' },
font: { family: { note: 'FreightText, serif' } },
font: { family: { note: '"Newsreader Text", serif' } },
}}
base="dark"
>

2
src/components/Theme/themes/common.js
View file

@ -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',

146
src/scss/fonts/_font-faces.scss
View file

@ -169,13 +169,13 @@
font-display: swap;
}
/* FREIGHT TEXT */
/* NEWSREADER TEXT */
@font-face {
font-family: 'FreightText';
font-family: 'Newsreader Text';
src:
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff2')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Bold.woff2')
format('woff2'),
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Bold.woff')
format('woff');
font-weight: bold;
font-style: normal;
@ -183,23 +183,119 @@
}
@font-face {
font-family: 'FreightText';
font-family: 'Newsreader Text';
src:
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff2')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraBoldItalic.woff2')
format('woff2'),
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraBoldItalic.woff')
format('woff');
font-weight: normal;
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';
font-family: 'Newsreader Text';
src:
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff2')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-LightItalic.woff2')
format('woff2'),
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff')
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;
@ -207,25 +303,37 @@
}
@font-face {
font-family: 'FreightText';
font-family: 'Newsreader Text';
src:
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff2')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Regular.woff2')
format('woff2'),
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-Regular.woff')
format('woff');
font-weight: 300;
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FreightText';
font-family: 'Newsreader Text';
src:
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff2')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraLight.woff2')
format('woff2'),
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff')
url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NewsreaderText-ExtraLight.woff')
format('woff');
font-weight: 500;
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;
}

8
src/scss/tokens/text/_font-family.scss
View file

@ -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;

8
src/scss/tokens/text/mixins/_font-family.scss
View file

@ -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;