update font

src/components/GlobalStyles.ts

@@ -19,76 +19,20 @@ const BODY_STYLES = {
   margin: '0',
   padding: '0',
   color: 'rgba(20, 20, 70, .75)',
-  'font-size': '14px',
+  'font-size': '15px',
   'line-height': '20px',
   'letter-spacing': '0.02em',
   'font-weight': '400',
+  'font-variant': 'initial',
+  'font-feature-settings': 'initial',
 };
 
 const fontsProvider = ({ publicUrl = '' }) => `
   @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
+    font-family: 'Figtree';
     font-display: swap;
-    src: url(${publicUrl}/fonts/Inter-Regular.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Regular.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/Inter-Medium.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Medium.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/Inter-SemiBold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-SemiBold.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/Inter-Bold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Bold.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Source Code Pro';
-    src: url('${publicUrl}/fonts/SourceCodePro-Regular.woff2') format('woff2'),
-      url('${publicUrl}/fonts/SourceCodePro-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/JetBrainsMono-Regular.woff2) format('woff2'),
-      url(${publicUrl}/fonts/JetBrainsMono-Regular.woff) format('woff');
-  }
-
-  @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/JetBrainsMono-Bold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/JetBrainsMono-Bold.woff) format('woff');
-  }
-
-  @font-face {
-    font-family: 'text-security-disc';
-    src: url(${publicUrl}/fonts/text-security-disc.woff2) format('woff2'),
-      url(${publicUrl}/fonts/text-security-disc.woff) format('woff');
+    src: url(${publicUrl}/fonts/Figtree.woff2) format('woff2'),
+      url(${publicUrl}/fonts/Figtree.woff) format('woff');
   }
 `;
 
@@ -121,7 +65,7 @@ export const GlobalStyles = createGlobalStyle`
   html {
     --font: ${({ font }: GlobalStylesProps) =>
       font ||
-      'Inter'}, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+      'Figtree'}, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     --monospace-font: ${({ monospaceFont }) =>
       `${
         monospaceFont ? `${monospaceFont}, ` : ''
@@ -201,7 +145,7 @@ export const GlobalStyles = createGlobalStyle`
   pre[class*="language-"] {
     color: var(--dark-color);
     background: none;
-    font-family: "Source Code Pro", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     text-align: left;
     font-weight: normal;
     font-size: 14px;

src/stories/Typography.stories.mdx

@@ -29,13 +29,17 @@ There are many ways to create typography elements like text labels and headings.
       <Block preset="h3">The quick brown fox jumps over the lazy dog - h3</Block>
       <Block preset="h4">The quick brown fox jumps over the lazy dog - h4</Block>
       <Block preset="h5">The quick brown fox jumps over the lazy dog - h5</Block>
+      <Block preset="h5s">The quick brown fox jumps over the lazy dog - h5m - Figtree SemiBold 36-44</Block>
+      <Block preset="h5m">The quick brown fox jumps over the lazy dog - h5m - Figtree Medium 36-44</Block>
       <Block preset="h6">The quick brown fox jumps over the lazy dog - h6</Block>
       <Block preset="t1">The quick brown fox jumps over the lazy dog - t1</Block>
       <Block preset="t2">The quick brown fox jumps over the lazy dog - t2</Block>
       <Block preset="t2m">The quick brown fox jumps over the lazy dog - t2m</Block>
       <Block preset="t3">The quick brown fox jumps over the lazy dog - t3</Block>
       <Block preset="t3m">The quick brown fox jumps over the lazy dog - t3m</Block>
+      <Block preset="t3s">The quick brown fox jumps over the lazy dog - t3s</Block>
       <Block preset="t4">The quick brown fox jumps over the lazy dog - t4</Block>
+      <Block preset="t4m">The quick brown fox jumps over the lazy dog - t4m</Block>
       <Block preset="p1">The quick brown fox jumps over the lazy dog - p1</Block>
       <Block preset="p2">The quick brown fox jumps over the lazy dog - p2</Block>
       <Block preset="p3">The quick brown fox jumps over the lazy dog - p3</Block>

src/tasty/styles/preset.ts

@@ -33,6 +33,28 @@ function setCSSValue(
   }
 }
 
+const SETTINGS_DEFAULT_MAP = {
+  wght: 400,
+};
+function setVariationSetting(
+  styles: Styles,
+  setting: string,
+  presetName: string,
+  isPropOnly = false,
+) {
+  styles[
+    `--font-variation-${setting}`
+  ] = `var(--${presetName}-font-variation-${setting}, var(--default-font-variation-${setting}, ${
+    SETTINGS_DEFAULT_MAP[setting] || 'initial'
+  }))`;
+
+  if (!isPropOnly) {
+    styles[
+      'font-variation-settings'
+    ] = `'${setting}' var(--font-variation-${setting}, 400)`;
+  }
+}
+
 export function presetStyle({
   preset,
   fontSize,
@@ -41,6 +63,7 @@ export function presetStyle({
   letterSpacing,
   fontWeight,
   fontStyle,
+  fontVariationWeight,
   font,
 }) {
   if (!preset) return '';
@@ -81,6 +104,8 @@ export function presetStyle({
     setCSSValue(styles, 'font-family', name);
   }
 
+  setVariationSetting(styles, 'wght', name);
+
   setCSSValue(styles, 'bold-font-weight', name, true);
   setCSSValue(styles, 'icon-size', name, true);
 
@@ -94,6 +119,7 @@ presetStyle.__lookupStyles = [
   'letterSpacing',
   'textTransform',
   'fontWeight',
+  'fontVariationWeight',
   'fontStyle',
   'font',
 ];