From b80ee6dd79aeeff30eafc12c15f96b292f0c2aba Mon Sep 17 00:00:00 2001 From: Robert Date: Mon, 11 Sep 2023 11:48:55 +0200 Subject: [PATCH] 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.