From 3d888e1c44fa933e5d12f86fa9405e3ae6399293 Mon Sep 17 00:00:00 2001 From: Robert Date: Tue, 22 Aug 2023 16:37:25 +0200 Subject: [PATCH 1/4] chore: allow and apply unicodeRange --- packages/Core/src/utils/font.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/Core/src/utils/font.ts b/packages/Core/src/utils/font.ts index 612a86d2c6..6d2a4c6475 100644 --- a/packages/Core/src/utils/font.ts +++ b/packages/Core/src/utils/font.ts @@ -9,6 +9,7 @@ type FontVariation = { style?: string isVariable?: boolean extension?: string + unicodeRange?: string } type Font = { @@ -33,21 +34,16 @@ function getSource( function getFont({ name, - variation: { display = 'swap', extension = 'woff2', isVariable, style, url, weight }, + variation: { display = 'swap', extension = 'woff2', isVariable, style, unicodeRange, url, weight }, }: Font) { return css` @font-face { font-family: ${name}; src: ${getSource(url, extension, isVariable)}; font-display: ${display}; - ${weight && - css` - font-weight: ${weight}; - `} - ${style && - css` - font-style: ${style}; - `} + ${weight && css`font-weight: ${weight};`} + ${style && css`font-style: ${style};`} + ${unicodeRange && css`unicode-range: ${unicodeRange};`} } ` } From 86ea8a5c95790ca969828f79c38e919189ec7a77 Mon Sep 17 00:00:00 2001 From: Robert Date: Tue, 22 Aug 2023 17:06:55 +0200 Subject: [PATCH 2/4] fix: lint issues --- packages/Core/src/utils/font.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/Core/src/utils/font.ts b/packages/Core/src/utils/font.ts index 6d2a4c6475..a70f0a6479 100644 --- a/packages/Core/src/utils/font.ts +++ b/packages/Core/src/utils/font.ts @@ -41,9 +41,18 @@ function getFont({ font-family: ${name}; src: ${getSource(url, extension, isVariable)}; font-display: ${display}; - ${weight && css`font-weight: ${weight};`} - ${style && css`font-style: ${style};`} - ${unicodeRange && css`unicode-range: ${unicodeRange};`} + ${weight && + css` + font-weight: ${weight}; + `} + ${style && + css` + font-style: ${style}; + `} + ${unicodeRange && + css` + unicode-range: ${unicodeRange}; + `} } ` } From 41a1b43345e406348e73be50d41173359c0760c6 Mon Sep 17 00:00:00 2001 From: Robert Date: Tue, 22 Aug 2023 17:32:53 +0200 Subject: [PATCH 3/4] fix: lint issues --- packages/Core/src/utils/font.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/Core/src/utils/font.ts b/packages/Core/src/utils/font.ts index a70f0a6479..b5dc5b09e1 100644 --- a/packages/Core/src/utils/font.ts +++ b/packages/Core/src/utils/font.ts @@ -34,7 +34,15 @@ function getSource( function getFont({ name, - variation: { display = 'swap', extension = 'woff2', isVariable, style, unicodeRange, url, weight }, + variation: { + display = 'swap', + extension = 'woff2', + isVariable, + style, + unicodeRange, + url, + weight, + }, }: Font) { return css` @font-face { @@ -51,7 +59,7 @@ function getFont({ `} ${unicodeRange && css` - unicode-range: ${unicodeRange}; + unicode-range: ${unicodeRange}; `} } ` From b80ee6dd79aeeff30eafc12c15f96b292f0c2aba Mon Sep 17 00:00:00 2001 From: Robert Date: Mon, 11 Sep 2023 11:48:55 +0200 Subject: [PATCH 4/4] chore: add docs for subsetting font --- docs/pages/theming/customize.mdx | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/docs/pages/theming/customize.mdx b/docs/pages/theming/customize.mdx index fd20d8a32a..9cda62c129 100644 --- a/docs/pages/theming/customize.mdx +++ b/docs/pages/theming/customize.mdx @@ -140,14 +140,36 @@ export default function Root() { } ``` -## Change fonts path url +## Change fonts -If you wan to change the url path for the fonts, you can change the property `fontsUrl` on `createTheme()`. On our case at Welcome to the jungle, we want to have the fonts from the same domain name as our main website. By default is on welcome-ui.com domain. +If you want to change the url path for the fonts, you can change the property `fontsUrl` on `createTheme()`. By default the fonts are served from the welcome-ui.com domain. In our case at Welcome to the Jungle, we want to have the fonts served from the same domain name as our main website. ```jsx live=false const theme = createTheme({ fontsUrl: 'https://cdn.welcometothejungle.com/fonts', ...yourTheme }) ``` +You can also overload the fonts used (for example to subset the fonts) by merging a font object with the theme. For example to replace the `work-sans` font with subsetted versions, host your subsetted versions somewhere then update the `fontFaces` object: + +```jsx live=false +const fontFaces = { + 'work-sans': [ + { + url: 'https://my_website.com/public/work-sans-variable-latin-ext', + uniCodeRange: + 'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF', + weight: '400-600', + }, + { + url: 'https://my_website.com/public/work-sans-variable-latin', + uniCodeRange: + 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD', + weight: '400-600', + }, + ], +} +const theme = createTheme({ fontFaces, ...yourTheme }) +``` + ## All theme values Here are all the [possible values for your theme](https://github.com/WTTJ/welcome-ui/blob/master/packages/Core/theme/core.ts).
These will be merged with the default theme.