feat: add custom font to the project3

HamzaAmar · Oct 24, 2023 · 986f5ce · 986f5ce
1 parent df335a2
commit 986f5ce
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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));