From 1d27c5f8b1cb334132c86b6864ae19690295f36d Mon Sep 17 00:00:00 2001 From: James Parslow Date: Thu, 21 Apr 2022 11:46:00 +0100 Subject: [PATCH] feat: consume Sage UI font from @sage/design-tokens package --- .storybook/preview-head.html | 6 ++--- docs/getting-started.stories.mdx | 28 ++--------------------- src/style/fonts.css | 38 ++++++++++++++++++-------------- 3 files changed, 27 insertions(+), 45 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index d5c6519e3c..0fee915c78 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -8,7 +8,7 @@ - - - - - -``` +_Note the `Sage UI` font files themselves are loaded from the [@sage/design-tokens](https://github.com/Sage/design-tokens) library. If this has not been installed in your project beforehand, text will be rendered in the browser's default sans-serif font._ #### React and React DOM @@ -122,7 +98,7 @@ Carbon supports two theming systems - the latest which uses Design Tokens in for The themes available in Carbon include: -- **sage** - the latest theme which uses Design Tokens in form of CSS custom properties. _Note this theme requires installation of `@sage/design-tokens` package, otherwise styles fallback to the old mint theme for compatability._ +- **sage** - the latest theme which uses Design Tokens in form of CSS custom properties. _Note this theme requires installation of `@sage/design-tokens` library, otherwise styles fallback to the old mint theme for compatability._ - **mint**, **aegean** and **none** - legacy themes that use old theme properties consumed by ThemeProvider. #### Carbon Provider diff --git a/src/style/fonts.css b/src/style/fonts.css index f08aba9ac8..4d12726e1a 100644 --- a/src/style/fonts.css +++ b/src/style/fonts.css @@ -1,30 +1,36 @@ -@font-face{ - font-family: "Sage UI"; - src: url('https://fonts.sage.com/Sage_UI-Regular.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Regular.woff') format("woff"); - font-weight: 400; +@font-face { + font-family: "CarbonIcons"; + src: url("./assets/carbon-icons-webfont.woff") format("woff"); + font-weight: normal; font-style: normal; - font-display: swap; } -@font-face{ +@font-face { font-family: "Sage UI"; - src: url('https://fonts.sage.com/Sage_UI-Medium.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Medium.woff') format("woff"); - font-weight: 700; font-style: normal; - font-display: swap; + font-weight: 400; + src: url("~@sage/design-tokens/assets/fonts/sageui-regular.woff2") format("woff2"), + url("~@sage/design-tokens/assets/fonts/sageui-regular.woff") format("woff"), + url("~@sage/design-tokens/assets/fonts/sageui-regular.ttf") format("truetype"), + url("~@sage/design-tokens/assets/fonts/sageui-regular.otf") format("opentype"); } -@font-face{ +@font-face { font-family: "Sage UI"; - src: url('https://fonts.sage.com/Sage_UI-Bold.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Bold.woff') format("woff"); - font-weight: 900; font-style: normal; - font-display: swap; + font-weight: 700; + src: url("~@sage/design-tokens/assets/fonts/sageui-medium.woff2") format("woff2"), + url("~@sage/design-tokens/assets/fonts/sageui-medium.woff") format("woff"), + url("~@sage/design-tokens/assets/fonts/sageui-medium.ttf") format("truetype"), + url("~@sage/design-tokens/assets/fonts/sageui-medium.otf") format("opentype"); } @font-face { - font-family: "CarbonIcons"; - src: url("./assets/carbon-icons-webfont.woff") format("woff"); - font-weight: normal; + font-family: "Sage UI"; font-style: normal; + font-weight: 900; + src: url("~@sage/design-tokens/assets/fonts/sageui-bold.woff2") format("woff2"), + url("~@sage/design-tokens/assets/fonts/sageui-bold.woff") format("woff"), + url("~@sage/design-tokens/assets/fonts/sageui-bold.ttf") format("truetype"), + url("~@sage/design-tokens/assets/fonts/sageui-bold.otf") format("opentype"); }