diff --git a/public/fonts/Figtree.woff b/public/fonts/Figtree.woff
new file mode 100644
index 000000000..6c9aa35af
Binary files /dev/null and b/public/fonts/Figtree.woff differ
diff --git a/public/fonts/Figtree.woff2 b/public/fonts/Figtree.woff2
new file mode 100644
index 000000000..582cabd9d
Binary files /dev/null and b/public/fonts/Figtree.woff2 differ
diff --git a/public/fonts/Inter-Bold.woff b/public/fonts/Inter-Bold.woff
deleted file mode 100644
index 80f70f058..000000000
Binary files a/public/fonts/Inter-Bold.woff and /dev/null differ
diff --git a/public/fonts/Inter-Bold.woff2 b/public/fonts/Inter-Bold.woff2
deleted file mode 100644
index 622e5f147..000000000
Binary files a/public/fonts/Inter-Bold.woff2 and /dev/null differ
diff --git a/public/fonts/Inter-Medium.woff b/public/fonts/Inter-Medium.woff
deleted file mode 100644
index 1d50f8007..000000000
Binary files a/public/fonts/Inter-Medium.woff and /dev/null differ
diff --git a/public/fonts/Inter-Medium.woff2 b/public/fonts/Inter-Medium.woff2
deleted file mode 100644
index ffb4206c2..000000000
Binary files a/public/fonts/Inter-Medium.woff2 and /dev/null differ
diff --git a/public/fonts/Inter-Regular.woff b/public/fonts/Inter-Regular.woff
deleted file mode 100644
index 7cb4990b8..000000000
Binary files a/public/fonts/Inter-Regular.woff and /dev/null differ
diff --git a/public/fonts/Inter-Regular.woff2 b/public/fonts/Inter-Regular.woff2
deleted file mode 100644
index 66691b83a..000000000
Binary files a/public/fonts/Inter-Regular.woff2 and /dev/null differ
diff --git a/public/fonts/Inter-SemiBold.woff b/public/fonts/Inter-SemiBold.woff
deleted file mode 100644
index 490bd9d5e..000000000
Binary files a/public/fonts/Inter-SemiBold.woff and /dev/null differ
diff --git a/public/fonts/Inter-SemiBold.woff2 b/public/fonts/Inter-SemiBold.woff2
deleted file mode 100644
index 9fd7726eb..000000000
Binary files a/public/fonts/Inter-SemiBold.woff2 and /dev/null differ
diff --git a/public/fonts/JetBrainsMono-Bold.woff b/public/fonts/JetBrainsMono-Bold.woff
deleted file mode 100644
index c8118a879..000000000
Binary files a/public/fonts/JetBrainsMono-Bold.woff and /dev/null differ
diff --git a/public/fonts/JetBrainsMono-Bold.woff2 b/public/fonts/JetBrainsMono-Bold.woff2
deleted file mode 100644
index d09807617..000000000
Binary files a/public/fonts/JetBrainsMono-Bold.woff2 and /dev/null differ
diff --git a/public/fonts/JetBrainsMono-Medium.woff b/public/fonts/JetBrainsMono-Medium.woff
deleted file mode 100644
index 30e8af203..000000000
Binary files a/public/fonts/JetBrainsMono-Medium.woff and /dev/null differ
diff --git a/public/fonts/JetBrainsMono-Medium.woff2 b/public/fonts/JetBrainsMono-Medium.woff2
deleted file mode 100644
index cf13ff6ba..000000000
Binary files a/public/fonts/JetBrainsMono-Medium.woff2 and /dev/null differ
diff --git a/public/fonts/JetBrainsMono-Regular.woff b/public/fonts/JetBrainsMono-Regular.woff
deleted file mode 100644
index dc1d85f57..000000000
Binary files a/public/fonts/JetBrainsMono-Regular.woff and /dev/null differ
diff --git a/public/fonts/JetBrainsMono-Regular.woff2 b/public/fonts/JetBrainsMono-Regular.woff2
deleted file mode 100644
index fdf95dde6..000000000
Binary files a/public/fonts/JetBrainsMono-Regular.woff2 and /dev/null differ
diff --git a/public/fonts/SourceCodePro-Regular.woff b/public/fonts/SourceCodePro-Regular.woff
deleted file mode 100644
index eacf83e53..000000000
Binary files a/public/fonts/SourceCodePro-Regular.woff and /dev/null differ
diff --git a/public/fonts/SourceCodePro-Regular.woff2 b/public/fonts/SourceCodePro-Regular.woff2
deleted file mode 100644
index 21411ef40..000000000
Binary files a/public/fonts/SourceCodePro-Regular.woff2 and /dev/null differ
diff --git a/src/components/GlobalStyles.ts b/src/components/GlobalStyles.ts
index 69dcb96cd..48022c74c 100644
--- a/src/components/GlobalStyles.ts
+++ b/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;
diff --git a/src/stories/Typography.stories.mdx b/src/stories/Typography.stories.mdx
index c1f55e912..9044a3622 100644
--- a/src/stories/Typography.stories.mdx
+++ b/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>
diff --git a/src/tasty/styles/preset.ts b/src/tasty/styles/preset.ts
index e94e753f4..6ad1a29bc 100644
--- a/src/tasty/styles/preset.ts
+++ b/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',
 ];
diff --git a/src/tokens.ts b/src/tokens.ts
index 02ba60543..856cb307d 100644
--- a/src/tokens.ts
+++ b/src/tokens.ts
@@ -33,11 +33,11 @@ function color(name, opacity = 1) {
 
 const TOKENS = {
   // Base and legacy tokens
-  'font-size': '14px',
+  'font-size': '15px',
   'line-height': '20px',
-  'input-font-size': '14px',
+  'input-font-size': '15px',
   'input-line-height': '20px',
-  'input-letter-spacing': '0.02em',
+  'input-letter-spacing': '0',
   'disabled-opacity': '.4',
   gap: '8px',
   'outline-width': 'calc(1rem / 16 * 3)',
@@ -83,121 +83,163 @@ const TOKENS = {
   'border-radius-base': '4px',
 
   // font sizes
-  'text-font-size': '14px',
+  'text-font-size': '15px',
   'text-line-height': '20px',
   'text-letter-spacing': '0',
   // h1
   'h1-font-size': '36px',
   'h1-line-height': '44px',
-  'h1-letter-spacing': '-0.01em',
-  'h1-font-weight': '700',
+  'h1-letter-spacing': '0',
+  'h1-font-weight': '400',
+  'h1-font-variation-wght': '700',
   // h2
   'h2-font-size': '24px',
   'h2-line-height': '36px',
-  'h2-letter-spacing': '0em',
-  'h2-font-weight': '700',
+  'h2-letter-spacing': '0',
+  'h2-font-weight': '400',
+  'h2-font-variation-wght': '700',
   // h3
-  'h3-font-size': '20px',
+  'h3-font-size': '21px',
   'h3-line-height': '28px',
-  'h3-letter-spacing': '0em',
-  'h3-font-weight': '700',
+  'h3-letter-spacing': '0',
+  'h3-font-weight': '400',
+  'h3-font-variation-wght': '700',
   // h4
-  'h4-font-size': '18px',
+  'h4-font-size': '19px',
   'h4-line-height': '24px',
   'h4-letter-spacing': '0',
-  'h4-font-weight': '700',
+  'h4-font-weight': '400',
+  'h4-font-variation-wght': '700',
   // h5
-  'h5-font-size': '16px',
+  'h5-font-size': '17px',
   'h5-line-height': '22px',
   'h5-letter-spacing': '0',
-  'h5-font-weight': '700',
-  'h5-icon-size': '18px',
+  'h5-font-weight': '400',
+  'h5-font-variation-wght': '700',
+  // h5 semi-bold
+  'h5s-font-size': '17px',
+  'h5s-line-height': '22px',
+  'h5s-font-weight': '400',
+  'h5s-font-variation-wght': '600',
+  'h5s-letter-spacing': '0',
+  // h5 medium
+  'h5m-font-size': '17px',
+  'h5m-line-height': '22px',
+  'h5m-font-weight': '500',
+  'h5m-font-variation-wght': '500',
+  'h5m-letter-spacing': '0',
   // h6
-  'h6-font-size': '14px',
+  'h6-font-size': '15px',
   'h6-line-height': '20px',
-  'h6-letter-spacing': '0.01em',
-  'h6-font-weight': '600',
-  'h6-icon-size': '16px',
+  'h6-letter-spacing': '0',
+  'h6-font-weight': '400',
+  'h6-font-variation-wght': '600',
+  'h5-icon-size': '18px',
   // t1
-  't1-font-size': '18px',
+  't1-font-size': '19px',
   't1-line-height': '24px',
   't1-letter-spacing': '0',
   't1-font-weight': '400',
+  't1-font-variation-wght': '400',
   't1-icon-size': '20px',
   // t2
-  't2-font-size': '16px',
+  't2-font-size': '17px',
   't2-line-height': '22px',
-  't2-letter-spacing': '0',
   't2-font-weight': '400',
+  't2-font-variation-wght': '400',
+  't2-letter-spacing': '0',
   't2-icon-size': '18px',
   // t2m
-  't2m-font-size': '16px',
+  't2m-font-size': '17px',
   't2m-line-height': '22px',
+  't2m-font-weight': '400',
+  't2m-font-variation-wght': '500',
   't2m-letter-spacing': '0',
-  't2m-font-weight': '500',
   't2m-icon-size': '18px',
   // t3
-  't3-font-size': '14px',
+  't3-font-size': '15px',
   't3-line-height': '20px',
-  't3-letter-spacing': '0',
   't3-font-weight': '400',
+  't3-font-variation-wght': '400',
+  't3-letter-spacing': '0',
   't3-icon-size': '16px',
   // t3m
-  't3m-font-size': '14px',
+  't3m-font-size': '15px',
   't3m-line-height': '20px',
+
+  't3m-font-weight': '400',
+  't3m-font-variation-wght': '500',
   't3m-letter-spacing': '0',
-  't3m-font-weight': '500',
+  // t3s
+  't3s-font-size': '15px',
+  't3s-line-height': '20px',
+  't3s-font-weight': '400',
+  't3s-font-variation-wght': '600',
+  't3s-letter-spacing': '0',
   't3m-icon-size': '16px',
   // t4
-  't4-font-size': '12px',
+  't4-font-size': '13px',
   't4-line-height': '18px',
+  't4-font-weight': '400',
+  't4-font-variation-wght': '400',
   't4-letter-spacing': '0',
-  't4-font-weight': '500',
+  // t4m
+  't4m-font-size': '13px',
+  't4m-line-height': '18px',
+  't4m-font-weight': '400',
+  't4m-font-variation-wght': '500',
+  't4m-letter-spacing': '0',
   't4-icon-size': '14px',
   // p1
-  'p1-font-size': '18px',
+  'p1-font-size': '19px',
   'p1-line-height': '28px',
   'p1-letter-spacing': '0',
   'p1-font-weight': '400',
+  'p1-font-variation-wght': '400',
   'p1-icon-size': '20px',
   // p2
-  'p2-font-size': '16px',
+  'p2-font-size': '17px',
   'p2-line-height': '24px',
-  'p2-letter-spacing': '0',
   'p2-font-weight': '400',
+  'p2-font-variation-wght': '400',
+  'p2-letter-spacing': '0',
   'p2-icon-size': '18px',
   // p3
-  'p3-font-size': '14px',
+  'p3-font-size': '15px',
   'p3-line-height': '22px',
-  'p3-letter-spacing': '0',
   'p3-font-weight': '400',
+  'p3-font-variation-wght': '400',
+  'p3-letter-spacing': '0',
   'p3-icon-size': '16px',
   // p4
-  'p4-font-size': '12px',
+  'p4-font-size': '13px',
   'p4-line-height': '20px',
+  'p4-font-weight': '400',
+  'p4-font-variation-wght': '400',
   'p4-letter-spacing': '0',
-  'p4-font-weight': '500',
   'p4-icon-size': '14px',
   // c1
-  'c1-font-size': '14px',
+  'c1-font-size': '15px',
   'c1-line-height': '20px',
+  'c1-font-weight': '400',
+  'c1-font-variation-wght': '500',
   'c1-letter-spacing': '0',
-  'c1-font-weight': '500',
   'c1-text-transform': 'uppercase',
   'c1-icon-size': '16px',
   // c2
-  'c2-font-size': '12px',
+  'c2-font-size': '13px',
   'c2-line-height': '18px',
-  'c2-letter-spacing': '0.01em',
-  'c2-font-weight': '500',
+  'c2-font-weight': '400',
+  'c2-font-variation-wght': '500',
+  'c2-letter-spacing': '0',
   'c2-text-transform': 'uppercase',
   'c2-icon-size': '14px',
   // tag
-  'tag-font-size': '12px',
-  'tag-line-height': '18px',
-  'tag-letter-spacing': '0.01em',
-  'tag-font-weight': '600',
-  'tag-icon-size': '14px',
+  'tag-font-size': '13px',
+  'tag-line-height': '12px',
+  'tag-font-weight': '400',
+  'tag-font-variation-wght': '600',
+  'tag-letter-spacing': '0',
   // strong
   'strong-font-size': 'inherit',
   'strong-line-height': 'inherit',
@@ -218,7 +260,8 @@ const TOKENS = {
   'default-line-height': 'var(--t3-line-height)',
   'default-letter-spacing': 'var(--t3-letter-spacing)',
   'default-font-weight': 'var(--t3-font-weight)',
-  'default-bold-font-weight': '700',
+  'default-bold-font-weight': '400',
+  'default-font-variation-weight': '400',
   'default-icon-size': 'inherit',
   // scrollbar colors
   'scrollbar-width': '1.5x',