Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: switch to font display swap #641

Merged
merged 13 commits into from
Jun 28, 2024
4 changes: 4 additions & 0 deletions build.washingtonpost.com/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,8 @@ module.exports = withBundleAnalyzer({
env: {
APP_ENV: "production",
},
transpilePackages: [
"@washingtonpost/wpds-ui-kit",
"@washingtonpost/wpds-kitchen-sink",
],
});
2 changes: 1 addition & 1 deletion build.washingtonpost.com/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"@radix-ui/react-checkbox": "^1.0.0",
"@radix-ui/react-collapsible": "^1.0.0",
"@radix-ui/react-toggle-group": "^1.0.1",
"@stitches/react": "1.2.8",
"@stitches/react": "1.3.1-1",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adds TS support for FontFace types like sizeAdjust

"@washingtonpost/front-end-utils": "0.5.17-alpha.1",
"@washingtonpost/site-favicons": "0.3.4-alpha.1",
"@washingtonpost/site-footer": "0.25.3-alpha.1",
Expand Down
37 changes: 0 additions & 37 deletions build.washingtonpost.com/pages/_document.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,43 +42,6 @@ export default function Document() {
type="font/woff2"
crossOrigin="anonymous"
/>
<style
dangerouslySetInnerHTML={{
__html: `@font-face {
font-family: Postoni;
font-weight: 700;
font-display: fallback;
src: url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Bold.woff2);
unicode-range: U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,
U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014,
U+2018, U+2019, U+201c, U+201d, U+2026;
}
@font-face {
font-family: Postoni;
font-weight: 300;
font-display: fallback;
src: url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Regular.woff2);
}
@font-face {
font-family: Franklin;
font-weight: 700;
font-display: fallback;
unicode-range: U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,
U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014,
U+2018, U+2019, U+201c, U+201d, U+2026;
src: url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Bold.woff2);
}
@font-face {
font-family: Franklin;
font-weight: 300;
font-display: fallback;
src: url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Light.woff2);
unicode-range: U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,
U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f1, U+f3-f5, U+fa, U+2009, U+2013,
U+2014, U+2018, U+2019, U+201c, U+201d, U+2026;
}`,
}}
/>
</Head>
<body>
<noscript>
Expand Down
54 changes: 54 additions & 0 deletions build.washingtonpost.com/pages/font-faces.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from "react";
import { Box } from "@washingtonpost/wpds-ui-kit";
import tokens from "@washingtonpost/wpds-ui-kit/src/theme/wpds.tokens.json";

const FontFacePlayground = ({ stacks }) => {
return (
<Box
css={{
color: "$onBackground",
h1: {
fontSize: "$400",
fontFamily: "$headline",
},
h2: {
fontSize: "$200",
fontFamily: "$subhead",
},
}}
>
<h1>@font-faces</h1>
{Object.keys(stacks).map((stack) => (
<Box key={stack}>
<h2>{stack}</h2>
<Box
as="p"
css={{
fontFamily: `$${stack}`,
fontSize: "$400",
}}
>
The quick brown fox jumps over the lazy dog.
</Box>
</Box>
))}
</Box>
);
};

export async function getStaticProps() {
const stacks = {
magazine: tokens.fonts.magazine,
headline: tokens.fonts.headline,
subhead: tokens.fonts.subhead,
meta: tokens.fonts.meta,
};

return {
props: {
stacks,
},
};
}

export default FontFacePlayground;
6 changes: 5 additions & 1 deletion build.washingtonpost.com/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./*"]
"@/*": ["./*"],
"@washingtonpost/wpds-ui-kit": ["../packages/kit/src/index.ts"],
"@washingtonpost/wpds-kitchen-sink": [
"../packages/kitchen-sink/src/index.ts"
]
},
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
Expand Down
20 changes: 18 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/kit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
"@radix-ui/react-use-controllable-state": "^1.0.1",
"@reach/combobox": "^0.18.0",
"@reach/popover": "^0.18.0",
"@stitches/react": "^1.2.8",
"@stitches/react": "1.3.1-1",
"@washingtonpost/wpds-assets": "2.0.0",
"match-sorter": "6.3.1",
"nanoid": "^3.3.4",
Expand Down
65 changes: 59 additions & 6 deletions packages/kit/src/theme/stitches.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -183,37 +183,90 @@ export const globalStyles = globalCss({
{
fontFamily: "Postoni",
fontWeight: 700,
fontDisplay: "fallback",
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Bold.woff2)",
unicodeRange:
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
},
{
fontFamily: "Postoni",
fontWeight: 300,
fontDisplay: "fallback",
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniWide-Regular.woff2)",
unicodeRange:
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
},
{
fontFamily: "Franklin-fallback",
fontWeight: 300,
src: "local('Arial')",
sizeAdjust: "94.00%",
ascentOverride: "102.13%",
descentOverride: "25.53%",
lineGapOverride: "21.28%",
},
{
fontFamily: "Franklin-fallback",
fontWeight: 700,
src: "local('Arial Bold')",
sizeAdjust: "96.04%",
ascentOverride: "99.96%",
descentOverride: "24.99%",
lineGapOverride: "20.82%",
},
{
fontFamily: "Postoni-fallback",
fontWeight: 300,
src: "local(garamond)",
sizeAdjust: "100%",
ascentOverride: "normal",
descentOverride: "normal",
lineGapOverride: "normal",
},
{
fontFamily: "Postoni-fallback",
src: "local(garamond)",
sizeAdjust: "100%",
ascentOverride: "normal",
descentOverride: "normal",
lineGapOverride: "normal",
},
{
fontFamily: "PostoniDisplayMag-fallback",
src: "local(garamond)",
sizeAdjust: "200%",
ascentOverride: "99.96%",
descentOverride: "24.99%",
lineGapOverride: "20.82%",
},
{
fontFamily: "Franklin",
fontWeight: 700,
fontDisplay: "fallback",
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Bold.woff2)",
unicodeRange:
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
},
{
fontFamily: "Franklin",
fontWeight: 300,
fontDisplay: "fallback",
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/ITC_Franklin-Light.woff2)",
unicodeRange:
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
},
{
fontFamily: "PostoniDisplayMag",
fontWeight: 800,
fontDisplay: "fallback",
fontDisplay: "swap",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniDisplayMag-Ultra.woff2)",
unicodeRange:
"U+a, U+20-29, U+2c-5b, U+5d, U+5f, U+61-7d, U+a0, U+a9, U+c9,U+e0-e3, U+e7, U+e9, U+ea, U+ed, U+f3-f5, U+fa, U+2009, U+2013, U+2014, U+2018, U+2019, U+201c, U+201d, U+2026",
},
{
fontFamily: "PostoniDisplayMag",
fontWeight: 800,
fontDisplay: "fallback",
fontDisplay: "swap",
fontStyle: "italic",
src: "url(https://www.washingtonpost.com/wp-stat/assets/fonts/PostoniDisplayMag-Ultra_Italic.woff2)",
},
Expand Down
2 changes: 1 addition & 1 deletion packages/kit/src/theme/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
export const sizes={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","087":"0.875rem"}
export const spaces={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem"}
export const radii={"100":"1rem","125":"1.25rem","150":"1.5rem","012":"0.125rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","round":"9999px"}
export const fonts={"headline":"Postoni, garamond, serif","subhead":"Franklin, arial, sans-serif","body":"georgia, Times New Roman, serif","meta":"Franklin, arial, sans-serif","magazine":"PostoniDisplayMag, garamond, serif"}
export const fonts={"headline":"Postoni, Postoni-fallback, serif","subhead":"Franklin, Franklin-fallback, sans-serif","body":"georgia, Times New Roman, serif","meta":"Franklin, Franklin-fallback, sans-serif","magazine":"PostoniDisplayMag, PostoniDisplayMag-fallback, serif"}
export const fontSizes={"100":"1rem","112":"1.125rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","075":"0.75rem","087":"0.875rem"}
export const fontWeights={"light":300,"regular":400,"bold":700,"ultra":800}
export const lineHeights={"100":1,"110":1.1,"125":1.25,"150":1.5,"160":1.6,"175":1.75,"200":2,"240":2.4}
Expand Down
8 changes: 4 additions & 4 deletions packages/kit/src/theme/wpds.tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -2038,19 +2038,19 @@
},
"fonts": {
"headline": {
"value": "Postoni, garamond, serif"
"value": "Postoni, Postoni-fallback, serif"
},
"subhead": {
"value": "Franklin, arial, sans-serif"
"value": "Franklin, Franklin-fallback, sans-serif"
},
"body": {
"value": "georgia, Times New Roman, serif"
},
"meta": {
"value": "Franklin, arial, sans-serif"
"value": "Franklin, Franklin-fallback, sans-serif"
},
"magazine": {
"value": "PostoniDisplayMag, garamond, serif"
"value": "PostoniDisplayMag, PostoniDisplayMag-fallback, serif"
}
},
"fontSize": {
Expand Down
Loading