From 986f5ce174a7c3ed2b3448e9e47faf03ede561a2 Mon Sep 17 00:00:00 2001 From: Hamza Miloud Amar Date: Tue, 24 Oct 2023 01:19:17 +0100 Subject: [PATCH] feat: add custom font to the project3 --- packages/pillar-core/src/css/generics/_reset.css | 13 ++++++++++--- packages/pillar-core/src/css/settings/_font.css | 8 ++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/pillar-core/src/css/generics/_reset.css b/packages/pillar-core/src/css/generics/_reset.css index 7f34666a..c8a9ed55 100644 --- a/packages/pillar-core/src/css/generics/_reset.css +++ b/packages/pillar-core/src/css/generics/_reset.css @@ -70,15 +70,22 @@ body { /* // Please Make Sure If you want to update This Background color you need to update .storybook/preview.js */ background-color: var(--surface-1); -webkit-font-smoothing: antialiased; - font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Fira Sans', Ubuntu, - Oxygen, 'Oxygen Sans', Cantarell, 'Droid Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Lucida Grande', Helvetica, Arial, sans-serif; + font-family: var(--custom-body-font, var(--body-font)); font-weight: 400; height: 100%; text-rendering: optimizespeed; line-height: 1.5; } +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--heading-font); +} + body[lang='ar'] * { letter-spacing: 0; } diff --git a/packages/pillar-core/src/css/settings/_font.css b/packages/pillar-core/src/css/settings/_font.css index d87be2e3..10f217dc 100644 --- a/packages/pillar-core/src/css/settings/_font.css +++ b/packages/pillar-core/src/css/settings/_font.css @@ -1,4 +1,12 @@ :root { + /* Font Family */ + --body-font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Fira Sans', Ubuntu, + Oxygen, 'Oxygen Sans', Cantarell, 'Droid Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Lucida Grande', Helvetica, Arial, sans-serif; + --heading-font: var(--custom-heading-font, var(--body-font)); + --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + + /* Font Size varaibles */ --font-3xs: var(--font-3xs-custom, clamp(0.54rem, calc(0.83rem + -0.28vw), 0.77rem)); --font-2xs: var(--font-2xs-custom, clamp(0.65rem, calc(0.86rem + -0.21vw), 0.82rem)); --font-xs: var(--font-xs-custom, clamp(0.78rem, calc(0.9rem + -0.12vw), 0.88rem));