Skip to main content
@@ -58,19 +58,19 @@ export const Main = ({
isHelpCentrePage={isHelpCentrePage}
/>
{children}
diff --git a/client/components/shared/footer/Footer.tsx b/client/components/shared/footer/Footer.tsx
index 0f6bf7e9c..1157ffc0d 100644
--- a/client/components/shared/footer/Footer.tsx
+++ b/client/components/shared/footer/Footer.tsx
@@ -1,10 +1,9 @@
import { css } from '@emotion/react';
import type { CMP } from '@guardian/libs';
-import { from, palette } from '@guardian/source/foundations';
+import { from, headlineBold24, palette } from '@guardian/source/foundations';
import { BackToTop } from '@guardian/source/react-components';
import type { SyntheticEvent } from 'react';
import { useEffect, useState } from 'react';
-import { headline } from '../../../styles/fonts';
import { isInUSA as isUserInUSA } from '../../../utilities/geolocation';
import { SupportTheGuardianButton } from '../SupportTheGuardianButton';
import { footerlinks } from './Footerlinks';
@@ -119,10 +118,8 @@ const supportStyles = css`
const supportTitleStyles = css`
color: ${palette.brandAlt[400]};
- font-family: ${headline};
- font-size: 24px;
+ ${headlineBold24};
line-height: 24px;
- font-weight: bold;
margin-top: 3px;
margin-bottom: 12px;
${from.phablet} {
diff --git a/client/components/shared/nav/LeftSideNav.tsx b/client/components/shared/nav/LeftSideNav.tsx
index 75c2eadf6..f99b1952d 100644
--- a/client/components/shared/nav/LeftSideNav.tsx
+++ b/client/components/shared/nav/LeftSideNav.tsx
@@ -1,7 +1,6 @@
import { css } from '@emotion/react';
-import { from, palette, space } from '@guardian/source/foundations';
+import { from, palette, space, textSans20 } from '@guardian/source/foundations';
import { Link } from 'react-router-dom';
-import { sans } from '../../../styles/fonts';
import type { MenuSpecificNavItem, NavItem } from './NavConfig';
import { NAV_LINKS, PROFILE_HOST_NAME } from './NavConfig';
@@ -16,48 +15,44 @@ const leftNavCss = css({
});
const leftNavLinkCss = (isSelected: boolean | undefined) =>
- css({
- fontSize: '1.25rem',
- fontWeight: isSelected ? 'bold' : 'normal',
- lineHeight: '1.25rem',
- fontFamily: sans,
- display: 'block',
- boxSizing: 'border-box',
- padding: '4px 0 0 5px',
- letterSpacing: '-0.02rem',
- textAlign: 'left',
- textDecoration: 'none',
- overflow: 'hidden',
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
- background: palette.neutral['100'],
- color: palette.brand[400],
-
- [from.desktop]: {
- borderLeft: `${space[2]}px solid ${
- isSelected ? palette.brandAlt[400] : palette.neutral['46']
- }`,
- boxShadow: isSelected ? '0 1px 0 white' : undefined,
- minHeight: 0,
- padding: '18px 0 18px 22px',
- position: 'relative',
- ' :after': {
- content: "''",
- position: 'absolute',
- bottom: 0,
- right: 0,
- height: '1px',
- width: 'calc(100% - 22px)',
- backgroundColor: palette.neutral['86'],
- },
-
- ':hover': {
- backgroundColor: isSelected
- ? palette.neutral['100']
- : palette.neutral['97'],
- },
- },
- });
+ css`
+ ${textSans20};
+ font-weight: ${isSelected ? 'bold' : 'normal'};
+ line-height: 1.25rem;
+ letter-spacing: -0.02rem;
+ text-align: left;
+ text-decoration: none;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ box-sizing: border-box;
+ padding: 4px 0 0 5px;
+ overflow: hidden;
+ background: ${palette.neutral['100']};
+ color: ${palette.brand[400]};
+ ${from.desktop} {
+ border-left: ${space[2]}px solid
+ ${isSelected ? palette.brandAlt[400] : palette.neutral['46']};
+ box-shadow: ${isSelected ? palette.brandAlt[400] : palette.neutral['46']};
+ min-height: 0;
+ padding: 18px 0 18px 22px;
+ position: relative;
+ :after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ height: 1px;
+ width: calc(100% - 22px);
+ background-color: ${palette.neutral['86']};
+ }
+ :hover {
+ background-color: isSelected
+ ? ${palette.neutral['100']}
+ : ${palette.neutral['97']};
+ }
+ }
+ `;
const leftNavItemCss = (isSelected: boolean | undefined) => ({
margin: 0,
diff --git a/client/fixtures/productBuilder/baseProducts.ts b/client/fixtures/productBuilder/baseProducts.ts
index 6ea83ea62..23c940340 100644
--- a/client/fixtures/productBuilder/baseProducts.ts
+++ b/client/fixtures/productBuilder/baseProducts.ts
@@ -125,7 +125,6 @@ export function baseGuardianWeekly(): ProductDetail {
deliveryAddressChangeEffectiveDate: '2021-12-10',
},
isTestUser: false,
- key: '1638374153759',
};
}
@@ -374,7 +373,6 @@ export function baseDigitalVoucher(): ProductDetail {
accountId: '8ad0824e7d584341017d5bc38c0d52dc',
},
isTestUser: false,
- key: '1639394814906',
};
}
diff --git a/client/styles/fonts.ts b/client/styles/fonts.ts
index 8f7f8bd2d..7fcd0e51e 100644
--- a/client/styles/fonts.ts
+++ b/client/styles/fonts.ts
@@ -1,297 +1,170 @@
+/*
+ * See here for Guardian font usage reference:
+ * https://github.com/guardian/fonts
+ */
+
const fontAssetsUrl = 'https://assets.guim.co.uk/static/frontend/fonts/';
export const fonts = `
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-Light.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-Light.ttf") format("truetype");
- font-weight: 300;
- font-style: normal;
- }
-
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-LightItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-LightItalic.ttf") format("truetype");
- font-weight: 300;
- font-style: italic;
- }
-
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf") format("truetype");
- font-weight: 400;
- font-style: normal;
- }
+/************* Guardian Headline *************/
@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf") format("truetype");
- font-weight: 400;
- font-style: italic;
- }
-
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-Medium.ttf") format("truetype");
- font-weight: 500;
- font-style: normal;
- }
-
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf") format("truetype");
+ font-family: 'GH Guardian Headline';
+ src: url('${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-Medium.woff')
+ format('woff');
font-weight: 500;
- font-style: italic;
- }
-
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf") format("truetype");
- font-weight: 600;
font-style: normal;
- }
-
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf") format("truetype");
- font-weight: 600;
- font-style: italic;
- }
+ font-display: swap;
+}
@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf") format("truetype");
+ font-family: 'GH Guardian Headline';
+ src: url('${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-Bold.woff')
+ format('woff');
font-weight: 700;
font-style: normal;
- }
+ font-display: swap;
+}
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf") format("truetype");
- font-weight: 700;
- font-style: italic;
- }
+/************* Guardian Text Egyptian *************/
@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf") format("truetype");
- font-weight: 900;
+ font-family: 'GuardianTextEgyptian';
+ src: url('${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Regular.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-Regular.woff')
+ format('woff');
+ font-weight: 400;
font-style: normal;
- }
-
-@font-face {
- font-family: "GH Guardian Headline";
- src: url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf") format("truetype");
- font-weight: 900;
- font-style: italic;
- }
+ font-display: swap;
+}
@font-face {
- font-family: "GT Guardian Titlepiece";
- src: url("${fontAssetsUrl}guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff") format("woff"),
- url("${fontAssetsUrl}guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf") format("truetype");
+ font-family: 'GuardianTextEgyptian';
+ src: url('${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Bold.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-Bold.woff')
+ format('woff');
font-weight: 700;
font-style: normal;
- }
+ font-display: swap;
+}
+
+/************* Guardian Text Sans *************/
@font-face {
- font-family: "Guardian Text Sans Web";
- src: url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Regular.woff2")
- format("woff2"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Regular.woff")
- format("woff"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Regular.ttf")
- format("truetype");
+ font-family: 'GuardianTextSans';
+ src: url('${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Regular.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-textsans/latin1-not-hinted/GuardianTextSans-Regular.woff')
+ format('woff');
font-weight: 400;
font-style: normal;
- font-stretch: normal;
font-display: swap;
}
@font-face {
- font-family: 'Guardian Text Sans Web';
- src: url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-RegularItalic.woff2")
- format("woff2"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-RegularItalic.woff")
- format("woff"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-RegularItalic.ttf")
- format("truetype");
- font-weight: 400;
- font-style: italic;
- font-stretch: normal;
- font-display: swap;
-}
-@font-face {
- font-family: 'Guardian Text Sans Web';
- src: url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Medium.woff2")
- format("woff2"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Medium.woff")
- format("woff"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Medium.ttf")
- format("truetype");
- font-weight: 500;
- font-style: normal;
- font-stretch: normal;
- font-display: swap;
-}
-@font-face {
- font-family: 'Guardian Text Sans Web';
- src: url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-MediumItalic.woff2")
- format("woff2"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-MediumItalic.woff")
- format("woff"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-MediumItalic.ttf")
- format("truetype");
- font-weight: 500;
- font-style: italic;
- font-stretch: normal;
- font-display: swap;
-}
-@font-face {
- font-family: 'Guardian Text Sans Web';
- src: url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Bold.woff2")
- format("woff2"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Bold.woff")
- format("woff"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Bold.ttf")
- format("truetype");
- font-weight: 700;
- font-style: normal;
- font-display: swap;
-}
-@font-face {
- font-family: 'Guardian Text Sans Web';
- src: url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-BoldItalic.woff2")
- format("woff2"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-BoldItalic.woff")
- format("woff"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-BoldItalic.ttf")
- format("truetype");
- font-weight: 700;
- font-style: italic;
- font-display: swap;
+ font-family: 'GuardianTextSans';
+ src: url('${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-RegularItalic.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-textsans/latin1-not-hinted/GuardianTextSans-RegularItalic.woff')
+ format('woff');
+ font-weight: 400;
+ font-style: italic;
+ font-display: swap;
}
@font-face {
- font-family: 'Guardian Text Sans Web';
- src: url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Black.woff2")
- format("woff2"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Black.woff")
- format("woff"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Black.ttf")
- format("truetype");
- font-weight: 800;
- font-style: normal;
- font-display: swap;
+ font-family: 'GuardianTextSans';
+ src: url('${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-Bold.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-textsans/latin1-not-hinted/GuardianTextSans-Bold.woff')
+ format('woff');
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Guardian Text Sans Web';
- src: url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-BlackItalic.woff2")
- format("woff2"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-BlackItalic.woff")
- format("woff"),
- url("${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-BlackItalic.ttf")
- format("truetype");
- font-weight: 800;
- font-style: italic;
- font-display: swap;
+ font-family: 'GuardianTextSans';
+ src: url('${fontAssetsUrl}guardian-textsans/noalts-not-hinted/GuardianTextSans-BoldItalic.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-textsans/latin1-not-hinted/GuardianTextSans-BoldItalic.woff')
+ format('woff');
+ font-weight: 700;
+ font-style: italic;
+ font-display: swap;
}
+/************* Guardian Titlepiece *************/
@font-face {
- font-family: "GuardianTextEgyptian";
- src: url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Regular.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Regular.woff") format("woff"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Regular.ttf") format("truetype");
- font-weight: 400;
+ font-family: 'GT Guardian Titlepiece';
+ src: url('${fontAssetsUrl}guardian-titlepiece/full-not-hinted/GTGuardianTitlepiece-Bold.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-titlepiece/full-not-hinted/GTGuardianTitlepiece-Bold.woff')
+ format('woff');
+ font-weight: 700;
font-style: normal;
- }
+ font-display: swap;
+}
+`;
+/*
+ * unused font-face declarations:
+ *
+ *
+************* Guardian Headline *************
+@font-face {
+ font-family: 'GH Guardian Headline';
+ src: url('${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-Light.woff')
+ format('woff');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+}
@font-face {
- font-family: "GuardianTextEgyptian";
- src: url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-RegularItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-RegularItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-RegularItalic.ttf") format("truetype");
- font-weight: 400;
+ font-family: 'GH Guardian Headline';
+ src: url('${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-LightItalic.woff')
+ format('woff');
+ font-weight: 300;
font-style: italic;
- }
-
-@font-face {
- font-family: "GuardianTextEgyptian";
- src: url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Medium.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Medium.woff") format("woff"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Medium.ttf") format("truetype");
- font-weight: 500;
- font-style: normal;
- }
-
+ font-display: swap;
+}
@font-face {
- font-family: "GuardianTextEgyptian";
- src: url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-MediumItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-MediumItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-MediumItalic.ttf") format("truetype");
+ font-family: 'GH Guardian Headline';
+ src: url('${fontAssetsUrl}guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-headline/latin1-not-hinted/GHGuardianHeadline-MediumItalic.woff')
+ format('woff');
font-weight: 500;
font-style: italic;
- }
-
-@font-face {
- font-family: "GuardianTextEgyptian";
- src: url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Bold.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Bold.woff") format("woff"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Bold.ttf") format("truetype");
- font-weight: 700;
- font-style: normal;
- }
+ font-display: swap;
+}
+************* Guardian Text Egyptian *************
@font-face {
- font-family: "GuardianTextEgyptian";
- src: url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-BoldItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-BoldItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-BoldItalic.ttf") format("truetype");
- font-weight: 700;
+ font-family: 'GuardianTextEgyptian';
+ src: url('${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-RegularItalic.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-RegularItalic.woff')
+ format('woff');
+ font-weight: 400;
font-style: italic;
- }
-
-@font-face {
- font-family: "GuardianTextEgyptian";
- src: url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Black.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Black.woff") format("woff"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Black.ttf") format("truetype");
- font-weight: 900;
- font-style: normal;
- }
-
+ font-display: swap;
+}
@font-face {
- font-family: "GuardianTextEgyptian";
- src: url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-BlackItalic.woff2") format("woff2"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-BlackItalic.woff") format("woff"),
- url("${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-BlackItalic.ttf") format("truetype");
- font-weight: 900;
+ font-family: 'GuardianTextEgyptian';
+ src: url('${fontAssetsUrl}guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-BoldItalic.woff2')
+ format('woff2'),
+ url('${fontAssetsUrl}guardian-textegyptian/latin1-not-hinted/GuardianTextEgyptian-BoldItalic.woff')
+ format('woff');
+ font-weight: 700;
font-style: italic;
- }
-`;
-
-export const sans = `"Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif`;
-export const serif = `"GuardianTextEgyptian", Georgia, serif`;
-export const headline = `GH Guardian Headline, ${serif}`;
+ font-display: swap;
+}
+*/
diff --git a/client/styles/global.ts b/client/styles/global.ts
index d32105321..94de1ae13 100644
--- a/client/styles/global.ts
+++ b/client/styles/global.ts
@@ -1,4 +1,7 @@
-import { headline, serif } from './fonts';
+import {
+ headlineBold14Object,
+ textEgyptian14Object,
+} from '@guardian/source/foundations';
export const global = `
html {
@@ -42,11 +45,11 @@ h5,
h6 {
color: inherit;
font-weight: 500;
- font-family: ${serif};
+ font-family: ${textEgyptian14Object.fontFamily};
}
h1 {
- font-family: ${headline};
+ font-family: ${headlineBold14Object.fontFamily};
}
diff --git a/package.json b/package.json
index 3701fdd22..f854799d8 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
"babel-loader-exclude-node-modules-except": "1.2.1",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-source-map-support": "2.1.1",
- "chromatic": "6.4.1",
+ "chromatic": "11.20.2",
"copy-webpack-plugin": "9.1.0",
"core-js": "3.19.1",
"cypress": "^13.16.1",
@@ -142,13 +142,13 @@
"whatwg-fetch": "2.0.4"
},
"dependencies": {
- "@emotion/react": "11.11.1",
+ "@emotion/react": "11.11.3",
"@guardian/ab-core": "2.0.0",
"@guardian/ab-react": "2.0.1",
"@guardian/commercial": "^23.7.5",
- "@guardian/libs": "16.1.0",
- "@guardian/source": "1.0.2",
- "@guardian/source-development-kitchen": "1.0.0",
+ "@guardian/libs": "^17.0.0",
+ "@guardian/source": "^8.0.1",
+ "@guardian/source-development-kitchen": "^7.0.0",
"@okta/jwt-verifier": "^4.0.1",
"@sentry/browser": "5.22.3",
"@sentry/node": "5.22.3",
diff --git a/yarn.lock b/yarn.lock
index 1e36c58fd..aaf4c0afc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2989,6 +2989,11 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+"@emotion/hash@^0.9.2":
+ version "0.9.2"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+ integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
"@emotion/jest@11.9.1":
version "11.9.1"
resolved "https://registry.yarnpkg.com/@emotion/jest/-/jest-11.9.1.tgz#65224814552eab6acb923504e597c6f6b67e90d6"
@@ -3010,15 +3015,20 @@
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
-"@emotion/react@11.11.1":
- version "11.11.1"
- resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
- integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
+"@emotion/memoize@^0.9.0":
+ version "0.9.0"
+ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+ integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
+"@emotion/react@11.11.3":
+ version "11.11.3"
+ resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.3.tgz#96b855dc40a2a55f52a72f518a41db4f69c31a25"
+ integrity sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==
dependencies:
"@babel/runtime" "^7.18.3"
"@emotion/babel-plugin" "^11.11.0"
"@emotion/cache" "^11.11.0"
- "@emotion/serialize" "^1.1.2"
+ "@emotion/serialize" "^1.1.3"
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
"@emotion/utils" "^1.2.1"
"@emotion/weak-memoize" "^0.3.1"
@@ -3035,11 +3045,27 @@
"@emotion/utils" "^1.2.1"
csstype "^3.0.2"
+"@emotion/serialize@^1.1.3":
+ version "1.3.3"
+ resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8"
+ integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
+ dependencies:
+ "@emotion/hash" "^0.9.2"
+ "@emotion/memoize" "^0.9.0"
+ "@emotion/unitless" "^0.10.0"
+ "@emotion/utils" "^1.4.2"
+ csstype "^3.0.2"
+
"@emotion/sheet@^1.2.2":
version "1.2.2"
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
+"@emotion/unitless@^0.10.0":
+ version "0.10.0"
+ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+ integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
"@emotion/unitless@^0.8.1":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
@@ -3055,6 +3081,11 @@
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
+"@emotion/utils@^1.4.2":
+ version "1.4.2"
+ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52"
+ integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
+
"@emotion/weak-memoize@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
@@ -3260,10 +3291,10 @@
eslint-plugin-eslint-comments "3.2.0"
eslint-plugin-import "2.29.1"
-"@guardian/libs@16.1.0":
- version "16.1.0"
- resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-16.1.0.tgz#70d986a312a04e609a89ef1a631f6a3000e322da"
- integrity sha512-nb7r0C+UO4P6f0wH8sATtGYnGrfqCzOX4M1Pp2G+uj9c3tehMRSum4mgnqxSAVXN50LtkL2bwd4u3Ichk6670Q==
+"@guardian/libs@^17.0.0":
+ version "17.0.1"
+ resolved "https://registry.yarnpkg.com/@guardian/libs/-/libs-17.0.1.tgz#cf0f1ea6cf21f0889dcf7c0cd6a2b92bf9f47f39"
+ integrity sha512-uv+EF+lAgeSzBllULwT6morI/fsJWml8ROT2f/xLl2IejMio1zRt3HfTijdzVr4hYHlcGWntcHfrThjgqJgFHA==
"@guardian/libs@^18.0.0":
version "18.0.2"
@@ -3314,15 +3345,15 @@
resolved "https://registry.yarnpkg.com/@guardian/prettier/-/prettier-1.0.0.tgz#a5dd832e2ce31c6f723f0af77fe116b32b4695ff"
integrity sha512-srnhPn3hcSv14mDotFQN0CfN3k8MaGsXdK8BXAG95QQxM69Ybi16o4/Xqe361fwDEp7m+9jf03sETcMi8WsDlA==
-"@guardian/source-development-kitchen@1.0.0":
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/@guardian/source-development-kitchen/-/source-development-kitchen-1.0.0.tgz#9ac7efe9b28cb33170ed97c67eba1c25dc10a227"
- integrity sha512-nZYJuHici8Bja7bKs3GZY5UzNCnbWOq1OCYclC6rhvpkcXdrtP+zyqX6YwJKWMgEKg+aL/l595OubBdGenn7OA==
+"@guardian/source-development-kitchen@^7.0.0":
+ version "7.1.0"
+ resolved "https://registry.yarnpkg.com/@guardian/source-development-kitchen/-/source-development-kitchen-7.1.0.tgz#6b8a636d71b2b827ac5d6db31f3b0e6c1d32eeb7"
+ integrity sha512-rVJDH4HPEsU7UqXjchAcAWwuTdmSd3h7ISmRJMJ5p/hNohKGwB9GM6jHtbHYXOL7o2wjH7c6ZYL8Tn+/83huKw==
-"@guardian/source@1.0.2":
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/@guardian/source/-/source-1.0.2.tgz#d3910fa625694437fb425b19897376d85238cab4"
- integrity sha512-BoGkx6tDcQwDxfQ5dYPzpmSqf2SFTgNPDG7bwLPeeL0F6Up5EK5yIlfNslOS8KSh6a4SNBOU52DedQ9mFQkQhA==
+"@guardian/source@^8.0.1":
+ version "8.0.1"
+ resolved "https://registry.yarnpkg.com/@guardian/source/-/source-8.0.1.tgz#96d4ba34d887b06e2ef026cf604a50407408c5ec"
+ integrity sha512-DRty0UUddv+E3U81uDMc83BvMPkfLIj1Gb+jDQdLi6GdU9enpubsqOZfLtzxUVYQziukOCGf4DmkLhPHxzqoKw==
dependencies:
mini-svg-data-uri "1.4.4"
@@ -7291,10 +7322,10 @@ chownr@^2.0.0:
resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-chromatic@6.4.1:
- version "6.4.1"
- resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.4.1.tgz#fd8fad82282be030f4e4697dd992bbcbcbe75dc9"
- integrity sha512-i3WLhIORS8vu9OStJwPQ487/MYZiXT7byU5c9we1Vvfus/w1Kwbj/2n11EozokomGEw5o3VAeiRrZkTCXM8xew==
+chromatic@11.20.2:
+ version "11.20.2"
+ resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.20.2.tgz#10b309179cdc0b9195a5b68970366f9ebe67dfd1"
+ integrity sha512-c+M3HVl5Y60c7ipGTZTyeWzWubRW70YsJ7PPDpO1D735ib8+Lu3yGF90j61pvgkXGngpkTPHZyBw83lcu2JMxA==
chromatic@^11.4.0:
version "11.5.4"