diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
index 0c512c4cc..5332ccffa 100644
--- a/.storybook/data/tokens.json
+++ b/.storybook/data/tokens.json
@@ -133,7 +133,7 @@
   "eds-size-half": "0.25rem",
   "eds-size-1-and-half": "0.75rem",
   "eds-size-2-and-half": "1.25rem",
-  "eds-font-family-primary": "'Arimo', sans-serif",
+  "eds-font-family-primary": "'Graphik', sans-serif",
   "eds-font-family-secondary": "'Open Sans', sans-serif",
   "eds-font-size-11": "0.688rem",
   "eds-font-size-12": "0.75rem",
diff --git a/.storybook/main.js b/.storybook/main.js
index ef32f344d..70a1f4f85 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,6 +1,14 @@
 const path = require('path');
 const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
 
+/**
+ * Although `--static-dir` is marked as deprecated. The The Chromatic CLI
+ * currently pulls the staticDir from the build script, but does not support
+ * the staticDirs configuration option.
+ *
+ * We should refrain from using the staticDirs option in this configuration until
+ * https://github.com/chromaui/chromatic-cli/issues/462 is resolved.
+ */
 module.exports = {
   stories: [
     './components/**/*.stories.@(js|jsx|ts|tsx)',
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 2fd4e39b2..e8ffb45e0 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -5,6 +5,7 @@ import '../src/design-tokens/css/base/media.css';
 
 // Import theme tokens
 import '../src/tokens-dist/css/variables.css';
+import '../src/design-tokens/tier-1-definitions/fonts.css';
 
 // Import storybook-specific CSS
 import './css/styleguide-only.css';
diff --git a/package.json b/package.json
index 7a3c8adef..eaed4c518 100644
--- a/package.json
+++ b/package.json
@@ -25,11 +25,12 @@
     "build:tokens": "rm -rf src/tokens-dist/ && node ./style-dictionary.config.js",
     "build:icons": "svg-sprite-generate -d src/icons/ -o src/icons/spritemap/spritemap.svg && yarn generate-icon-types",
     "build:js": "tsc --project tsconfig.build.json",
-    "build:storybook": "build-storybook -o storybook-static",
+    "build:storybook": "build-storybook -o storybook-static -s src/design-tokens/tier-1-definitions/fonts",
     "build:styles": "postcss \"src/components/**/*.css\" --dir lib/ --base src/ --verbose",
     "chromatic": "chromatic",
     "commit": "./node_modules/.bin/cz",
-    "copy-to-lib": "yarn copy-icons-to-lib && yarn copy-tokens-to-lib",
+    "copy-to-lib": "yarn copy-icons-to-lib && yarn copy-tokens-to-lib && yarn copy-fonts-to-lib",
+    "copy-fonts-to-lib": "copyfiles -u 3 src/design-tokens/tier-1-definitions/fonts.css src/design-tokens/tier-1-definitions/fonts/**/* lib/tokens",
     "copy-icons-to-lib": "copyfiles -u 1 src/icons/spritemap/**/* lib",
     "copy-tokens-to-lib": "copyfiles -u 2 src/tokens-dist/**/* lib/tokens",
     "create-component": "plop",
@@ -50,7 +51,7 @@
     "release:patch": "yarn build && standard-version --release-as patch",
     "release:alpha": "yarn build && standard-version --prerelease alpha",
     "start": "yarn build:tokens && yarn storybook",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "start-storybook -p 9009 -s src/design-tokens/tier-1-definitions/fonts",
     "storybook:axe": "yarn run build:storybook && yarn run storybook:axeOnly",
     "storybook:axeOnly": "axe-storybook --build-dir storybook-static",
     "plop": "plop component",
diff --git a/src/components/CheckboxLabel/CheckboxLabel.module.css b/src/components/CheckboxLabel/CheckboxLabel.module.css
index 13a903155..1260e183e 100644
--- a/src/components/CheckboxLabel/CheckboxLabel.module.css
+++ b/src/components/CheckboxLabel/CheckboxLabel.module.css
@@ -1,6 +1,5 @@
 @import '../../design-tokens/mixins.css';
 
-
 /*------------------------------------*\
     #CHECKBOX LABEL
 \*------------------------------------*/
@@ -22,7 +21,7 @@
 }
 
 .label--md {
-  @mixin eds-theme-typography-label-md;
+  @mixin eds-theme-typography-label-md-subtle;
   line-height: var(--checkbox-svg-size); /* 1 */
 }
 
@@ -32,4 +31,3 @@
 .label--disabled {
   color: var(--eds-theme-color-text-disabled);
 }
-  
diff --git a/src/components/OverflowList/OverflowList.tsx b/src/components/OverflowList/OverflowList.tsx
index fb74f63c3..c3fd864c3 100644
--- a/src/components/OverflowList/OverflowList.tsx
+++ b/src/components/OverflowList/OverflowList.tsx
@@ -128,6 +128,9 @@ export const OverflowList = ({ className, children, ...other }: Props) => {
         className={styles['overflow-list__inner']}
         onScroll={handleOnScroll}
         ref={overflowListInnerRef}
+        // TODO: add correct aria role for overflow list
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
       >
         {children}
       </ul>
diff --git a/src/design-tokens/css/base/body.css b/src/design-tokens/css/base/body.css
index 7a4b041ee..e6c6d8374 100644
--- a/src/design-tokens/css/base/body.css
+++ b/src/design-tokens/css/base/body.css
@@ -1,5 +1,4 @@
 @import '../../mixins.css';
-@import '../../../styles/arimo.css';
 
 body {
   @mixin eds-theme-typography-body-text-md;
diff --git a/src/design-tokens/tier-1-definitions/fonts.css b/src/design-tokens/tier-1-definitions/fonts.css
new file mode 100644
index 000000000..68f5cc2d0
--- /dev/null
+++ b/src/design-tokens/tier-1-definitions/fonts.css
@@ -0,0 +1,41 @@
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 400;
+  font-style: normal;
+  src: url('./fonts/Graphik-Regular-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 400;
+  font-style: italic;
+  src: url('./fonts/Graphik-RegularItalic-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 500;
+  font-style: normal;
+  src: url('./fonts/Graphik-Medium-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 500;
+  font-style: italic;
+  src: url('./fonts/Graphik-MediumItalic-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 600;
+  font-style: normal;
+  src: url('./fonts/Graphik-Semibold-Web.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Graphik';
+  font-weight: 600;
+  font-style: italic;
+  src: url('./fonts/Graphik-SemiboldItalic-Web.woff2') format('woff2');
+}
diff --git a/src/design-tokens/tier-1-definitions/fonts/Graphik-Medium-Web.woff2 b/src/design-tokens/tier-1-definitions/fonts/Graphik-Medium-Web.woff2
new file mode 100644
index 000000000..52fd43cf9
Binary files /dev/null and b/src/design-tokens/tier-1-definitions/fonts/Graphik-Medium-Web.woff2 differ
diff --git a/src/design-tokens/tier-1-definitions/fonts/Graphik-MediumItalic-Web.woff2 b/src/design-tokens/tier-1-definitions/fonts/Graphik-MediumItalic-Web.woff2
new file mode 100644
index 000000000..56f66f3a0
Binary files /dev/null and b/src/design-tokens/tier-1-definitions/fonts/Graphik-MediumItalic-Web.woff2 differ
diff --git a/src/design-tokens/tier-1-definitions/fonts/Graphik-Regular-Web.woff2 b/src/design-tokens/tier-1-definitions/fonts/Graphik-Regular-Web.woff2
new file mode 100644
index 000000000..93be912c1
Binary files /dev/null and b/src/design-tokens/tier-1-definitions/fonts/Graphik-Regular-Web.woff2 differ
diff --git a/src/design-tokens/tier-1-definitions/fonts/Graphik-RegularItalic-Web.woff2 b/src/design-tokens/tier-1-definitions/fonts/Graphik-RegularItalic-Web.woff2
new file mode 100644
index 000000000..6cda2c859
Binary files /dev/null and b/src/design-tokens/tier-1-definitions/fonts/Graphik-RegularItalic-Web.woff2 differ
diff --git a/src/design-tokens/tier-1-definitions/fonts/Graphik-Semibold-Web.woff2 b/src/design-tokens/tier-1-definitions/fonts/Graphik-Semibold-Web.woff2
new file mode 100644
index 000000000..02de168f4
Binary files /dev/null and b/src/design-tokens/tier-1-definitions/fonts/Graphik-Semibold-Web.woff2 differ
diff --git a/src/design-tokens/tier-1-definitions/fonts/Graphik-SemiboldItalic-Web.woff2 b/src/design-tokens/tier-1-definitions/fonts/Graphik-SemiboldItalic-Web.woff2
new file mode 100644
index 000000000..8d1b2b5a2
Binary files /dev/null and b/src/design-tokens/tier-1-definitions/fonts/Graphik-SemiboldItalic-Web.woff2 differ
diff --git a/src/design-tokens/tier-1-definitions/typography-presets.css b/src/design-tokens/tier-1-definitions/typography-presets.css
index a17994834..3f857ed60 100644
--- a/src/design-tokens/tier-1-definitions/typography-presets.css
+++ b/src/design-tokens/tier-1-definitions/typography-presets.css
@@ -62,7 +62,7 @@ should be reflected in the TypographyPresets story */
 }
 
 /**
- * Typography Preset 004: Medium & Bold
+ * Typography Preset 004: Medium, Light, & Bold
  */
 @define-mixin eds-typography-preset-004 $important {
   font-family: var(--eds-font-family-primary) $important;
@@ -71,6 +71,11 @@ should be reflected in the TypographyPresets story */
   line-height: 1.333 $important;
 }
 
+@define-mixin eds-typography-preset-004-light $important {
+  @mixin eds-typography-preset-004 $important;
+  font-weight: var(--eds-font-weight-light) $important;
+}
+
 @define-mixin eds-typography-preset-004-bold $important {
   @mixin eds-typography-preset-004 $important;
   font-weight: var(--eds-font-weight-bold) $important;
@@ -97,15 +102,20 @@ should be reflected in the TypographyPresets story */
 }
 
 /**
- * Typography Preset 006: Light & Bold
+ * Typography Preset 006: Medium, Light, & Bold
  */
 @define-mixin eds-typography-preset-006 $important {
   font-family: var(--eds-font-family-primary) $important;
-  font-weight: var(--eds-font-weight-light) $important;
+  font-weight: var(--eds-font-weight-medium) $important;
   font-size: var(--eds-font-size-14) $important;
   line-height: 1.57 $important;
 }
 
+@define-mixin eds-typography-preset-006-light $important {
+  @mixin eds-typography-preset-006 $important;
+  font-weight: var(--eds-font-weight-light) $important;
+}
+
 @define-mixin eds-typography-preset-006-bold $important {
   @mixin eds-typography-preset-006 $important;
   font-weight: var(--eds-font-weight-bold) $important;
diff --git a/src/design-tokens/tier-1-definitions/typography.json b/src/design-tokens/tier-1-definitions/typography.json
index fb1712c0e..e1e179687 100644
--- a/src/design-tokens/tier-1-definitions/typography.json
+++ b/src/design-tokens/tier-1-definitions/typography.json
@@ -2,7 +2,7 @@
   "eds": {
     "font-family": {
       "primary": {
-        "value": "'Arimo', sans-serif"
+        "value": "'Graphik', sans-serif"
       },
       "secondary": {
         "value": "'Open Sans', sans-serif"
diff --git a/src/design-tokens/tier-2-usage/typography-usage.css b/src/design-tokens/tier-2-usage/typography-usage.css
index 83072068e..d3db95e86 100644
--- a/src/design-tokens/tier-2-usage/typography-usage.css
+++ b/src/design-tokens/tier-2-usage/typography-usage.css
@@ -37,7 +37,7 @@
 }
 
 @define-mixin eds-theme-typography-body-text-lg $important {
-  @mixin eds-typography-preset-004 $important;
+  @mixin eds-typography-preset-004-light $important;
 }
 
 @define-mixin eds-theme-typography-body-text-md $important {
@@ -45,7 +45,7 @@
 }
 
 @define-mixin eds-theme-typography-body-text-sm $important {
-  @mixin eds-typography-preset-006 $important;
+  @mixin eds-typography-preset-006-light $important;
 }
 
 @define-mixin eds-theme-typography-body-text-xs $important {
@@ -53,7 +53,7 @@
 }
 
 @define-mixin eds-theme-typography-caption-text-lg $important {
-  @mixin eds-typography-preset-006 $important;
+  @mixin eds-typography-preset-006-light $important;
 }
 
 @define-mixin eds-theme-typography-caption-text-md $important {
@@ -65,27 +65,27 @@
 }
 
 @define-mixin eds-theme-typography-button-label $important {
-  @mixin eds-typography-preset-006-bold $important;
+  @mixin eds-typography-preset-006 $important;
 }
 
 @define-mixin eds-theme-typography-form-label $important {
-  @mixin eds-typography-preset-006-bold $important;
+  @mixin eds-typography-preset-006 $important;
 }
 
 @define-mixin eds-theme-typography-form-input $important {
-  @mixin eds-typography-preset-005 $important;
+  @mixin eds-typography-preset-005-light $important;
 }
 
 @define-mixin eds-theme-typography-kicker $important {
-  @mixin eds-typography-preset-011-bold $important;
+  @mixin eds-typography-preset-011 $important;
 }
 
 @define-mixin eds-theme-typography-kicker-sm $important {
-  @mixin eds-typography-preset-012-bold $important;
+  @mixin eds-typography-preset-012 $important;
 }
 
 @define-mixin eds-theme-typography-tag $important {
-  @mixin eds-typography-preset-009-bold $important;
+  @mixin eds-typography-preset-009 $important;
 }
 
 /* Old / legacy heading sizes */
diff --git a/src/fonts/open-sans-v16-latin-300.woff b/src/fonts/open-sans-v16-latin-300.woff
deleted file mode 100644
index 26567ff25..000000000
Binary files a/src/fonts/open-sans-v16-latin-300.woff and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-300.woff2 b/src/fonts/open-sans-v16-latin-300.woff2
deleted file mode 100644
index 7bf901c28..000000000
Binary files a/src/fonts/open-sans-v16-latin-300.woff2 and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-600.woff b/src/fonts/open-sans-v16-latin-600.woff
deleted file mode 100644
index 9d0eb42db..000000000
Binary files a/src/fonts/open-sans-v16-latin-600.woff and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-600.woff2 b/src/fonts/open-sans-v16-latin-600.woff2
deleted file mode 100644
index 5c5d54e2f..000000000
Binary files a/src/fonts/open-sans-v16-latin-600.woff2 and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-700.woff b/src/fonts/open-sans-v16-latin-700.woff
deleted file mode 100644
index b8b46d0b4..000000000
Binary files a/src/fonts/open-sans-v16-latin-700.woff and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-700.woff2 b/src/fonts/open-sans-v16-latin-700.woff2
deleted file mode 100644
index 3a38286c6..000000000
Binary files a/src/fonts/open-sans-v16-latin-700.woff2 and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-italic.woff b/src/fonts/open-sans-v16-latin-italic.woff
deleted file mode 100644
index 2bfa58261..000000000
Binary files a/src/fonts/open-sans-v16-latin-italic.woff and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-italic.woff2 b/src/fonts/open-sans-v16-latin-italic.woff2
deleted file mode 100644
index 10031c022..000000000
Binary files a/src/fonts/open-sans-v16-latin-italic.woff2 and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-regular.woff b/src/fonts/open-sans-v16-latin-regular.woff
deleted file mode 100644
index 39e88ed92..000000000
Binary files a/src/fonts/open-sans-v16-latin-regular.woff and /dev/null differ
diff --git a/src/fonts/open-sans-v16-latin-regular.woff2 b/src/fonts/open-sans-v16-latin-regular.woff2
deleted file mode 100644
index e9f58b775..000000000
Binary files a/src/fonts/open-sans-v16-latin-regular.woff2 and /dev/null differ
diff --git a/src/styles/arimo.css b/src/styles/arimo.css
deleted file mode 100644
index 1edc18183..000000000
--- a/src/styles/arimo.css
+++ /dev/null
@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600&display=swap');
diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
index 9cfd2ae59..faf04af56 100644
--- a/src/tokens-dist/css/variables.css
+++ b/src/tokens-dist/css/variables.css
@@ -133,7 +133,7 @@
   --eds-size-half: 0.25rem;
   --eds-size-1-and-half: 0.75rem;
   --eds-size-2-and-half: 1.25rem;
-  --eds-font-family-primary: 'Arimo', sans-serif;
+  --eds-font-family-primary: 'Graphik', sans-serif;
   --eds-font-family-secondary: 'Open Sans', sans-serif;
   --eds-font-size-11: 0.688rem;
   --eds-font-size-12: 0.75rem;
diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
index 256bc49df..095b42f87 100644
--- a/src/tokens-dist/json/variables-nested.json
+++ b/src/tokens-dist/json/variables-nested.json
@@ -183,7 +183,7 @@
       "2-and-half": "1.25rem"
     },
     "font-family": {
-      "primary": "'Arimo', sans-serif",
+      "primary": "'Graphik', sans-serif",
       "secondary": "'Open Sans', sans-serif"
     },
     "font-size": {
diff --git a/src/tokens-dist/scss/_variables.scss b/src/tokens-dist/scss/_variables.scss
index 164093e16..75d1bd43e 100644
--- a/src/tokens-dist/scss/_variables.scss
+++ b/src/tokens-dist/scss/_variables.scss
@@ -133,7 +133,7 @@ $eds-size-base-unit: 0.5rem !default;
 $eds-size-half: 0.25rem !default;
 $eds-size-1-and-half: 0.75rem !default;
 $eds-size-2-and-half: 1.25rem !default;
-$eds-font-family-primary: 'Arimo', sans-serif !default;
+$eds-font-family-primary: 'Graphik', sans-serif !default;
 $eds-font-family-secondary: 'Open Sans', sans-serif !default;
 $eds-font-size-11: 0.688rem !default;
 $eds-font-size-12: 0.75rem !default;