diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
index 56d39bdc643..6c07084ef47 100644
--- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -213,7 +213,16 @@ exports[`Button scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -257,12 +266,12 @@ exports[`Button scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -291,23 +300,23 @@ exports[`Button scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 /*
 * DNB icon
@@ -345,9 +354,10 @@ exports[`Button scss have to match snapshot 1`] = `
     height: 2em; }
 
 .dnb-button {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -368,10 +378,7 @@ exports[`Button scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-family: var(--font-family-std);
   --button-font-size: 1rem;
-  --button-font-weight: normal;
-  --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
   --button-width--small: 2rem;
@@ -398,10 +405,8 @@ exports[`Button scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-family: var(--button-font-family);
   font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  font-style: var(--button-font-style);
+  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
@@ -411,7 +416,6 @@ exports[`Button scss have to match snapshot 1`] = `
       height: var(--button-icon-size); }
   .dnb-button__text {
     color: inherit;
-    background-color: inherit;
     transform: translateY(var(--button-border-width)); }
   .dnb-button--size-small {
     width: var(--button-width--small);
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
index 7ccbf39fc59..562e0a30558 100644
--- a/packages/dnb-ui-lib/src/components/button/style/_button.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -4,10 +4,7 @@
 */
 
 :root {
-  --button-font-family: var(--font-family-std);
   --button-font-size: 1rem;
-  --button-font-weight: normal;
-  --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
   --button-width--small: 2rem;
@@ -39,10 +36,8 @@
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
 
-  font-family: var(--button-font-family);
   font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  font-style: var(--button-font-style);
+  line-height: var(--button-height);
   text-decoration: none;
 
   &__icon {
@@ -54,7 +49,6 @@
   }
   &__text {
     color: inherit;
-    background-color: inherit;
 
     // +1px because of the border width
     transform: translateY(var(--button-border-width));
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
index 8c1fb26cc22..0880fc21ad1 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -193,7 +193,16 @@ exports[`Dropdown scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -237,12 +246,12 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -271,23 +280,23 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 /*
 * DNB Input
@@ -333,9 +342,10 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     height: 2em; }
 
 .dnb-button {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -356,10 +366,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-family: var(--font-family-std);
   --button-font-size: 1rem;
-  --button-font-weight: normal;
-  --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
   --button-width--small: 2rem;
@@ -386,10 +393,8 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-family: var(--button-font-family);
   font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  font-style: var(--button-font-style);
+  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
@@ -399,7 +404,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
       height: var(--button-icon-size); }
   .dnb-button__text {
     color: inherit;
-    background-color: inherit;
     transform: translateY(var(--button-border-width)); }
   .dnb-button--size-small {
     width: var(--button-width--small);
@@ -488,9 +492,10 @@ a.dnb-button {
 *
 */
 .dnb-form-label {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -522,9 +527,10 @@ a.dnb-button {
   cursor: not-allowed; }
 
 .dnb-input {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -545,12 +551,9 @@ a.dnb-button {
 *
 */
 :root {
-  --input-font-family: var(--font-family-std);
   --input-font-size: 1rem;
   --input-font-size--medium: 1.5rem;
   --input-font-size--large: 2rem;
-  --input-font-weight: normal;
-  --input-font-style: normal;
   --input-padding: 0 1rem;
   --input-padding--medium: 0 1rem;
   --input-padding--large: 0 1.5rem;
@@ -569,10 +572,7 @@ a.dnb-button {
   align-items: center;
   flex-flow: row wrap;
   width: 100%;
-  font-family: var(--input-font-family);
   font-size: var(--input-font-size);
-  font-weight: var(--input-font-weight);
-  font-style: var(--input-font-style);
   line-height: var(--input-height); }
   .dnb-input__shell {
     position: relative;
@@ -664,9 +664,10 @@ a.dnb-button {
     margin-right: 1rem; }
 
 .dnb-dropdown {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
index f21e0a024ab..9ae0c0d8512 100644
--- a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -67,7 +67,16 @@ exports[`Icon scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -111,12 +120,12 @@ exports[`Icon scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -145,23 +154,23 @@ exports[`Icon scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 /*
 * Icon component
diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index 91a0d588a31..7c2e4c7a4ce 100644
--- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -50,7 +50,16 @@ exports[`InputMasked scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -94,12 +103,12 @@ exports[`InputMasked scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -128,23 +137,23 @@ exports[`InputMasked scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 /*
 * DNB Input
@@ -190,9 +199,10 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     height: 2em; }
 
 .dnb-button {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -213,10 +223,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-family: var(--font-family-std);
   --button-font-size: 1rem;
-  --button-font-weight: normal;
-  --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
   --button-width--small: 2rem;
@@ -243,10 +250,8 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-family: var(--button-font-family);
   font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  font-style: var(--button-font-style);
+  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
@@ -256,7 +261,6 @@ exports[`InputMasked scss have to match snapshot 1`] = `
       height: var(--button-icon-size); }
   .dnb-button__text {
     color: inherit;
-    background-color: inherit;
     transform: translateY(var(--button-border-width)); }
   .dnb-button--size-small {
     width: var(--button-width--small);
@@ -345,9 +349,10 @@ a.dnb-button {
 *
 */
 .dnb-form-label {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -379,9 +384,10 @@ a.dnb-button {
   cursor: not-allowed; }
 
 .dnb-input {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -402,12 +408,9 @@ a.dnb-button {
 *
 */
 :root {
-  --input-font-family: var(--font-family-std);
   --input-font-size: 1rem;
   --input-font-size--medium: 1.5rem;
   --input-font-size--large: 2rem;
-  --input-font-weight: normal;
-  --input-font-style: normal;
   --input-padding: 0 1rem;
   --input-padding--medium: 0 1rem;
   --input-padding--large: 0 1.5rem;
@@ -426,10 +429,7 @@ a.dnb-button {
   align-items: center;
   flex-flow: row wrap;
   width: 100%;
-  font-family: var(--input-font-family);
   font-size: var(--input-font-size);
-  font-weight: var(--input-font-weight);
-  font-style: var(--input-font-style);
   line-height: var(--input-height); }
   .dnb-input__shell {
     position: relative;
@@ -521,9 +521,10 @@ a.dnb-button {
     margin-right: 1rem; }
 
 .dnb-input-masked {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
index f282b09cf7d..005d574b203 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -126,7 +126,16 @@ exports[`Input scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -170,12 +179,12 @@ exports[`Input scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -204,23 +213,23 @@ exports[`Input scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 /*
 * DNB Button
@@ -262,9 +271,10 @@ exports[`Input scss have to match snapshot 1`] = `
     height: 2em; }
 
 .dnb-button {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -285,10 +295,7 @@ exports[`Input scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-family: var(--font-family-std);
   --button-font-size: 1rem;
-  --button-font-weight: normal;
-  --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
   --button-width--small: 2rem;
@@ -315,10 +322,8 @@ exports[`Input scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-family: var(--button-font-family);
   font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  font-style: var(--button-font-style);
+  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
@@ -328,7 +333,6 @@ exports[`Input scss have to match snapshot 1`] = `
       height: var(--button-icon-size); }
   .dnb-button__text {
     color: inherit;
-    background-color: inherit;
     transform: translateY(var(--button-border-width)); }
   .dnb-button--size-small {
     width: var(--button-width--small);
@@ -417,9 +421,10 @@ a.dnb-button {
 *
 */
 .dnb-form-label {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -451,9 +456,10 @@ a.dnb-button {
   cursor: not-allowed; }
 
 .dnb-input {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -474,12 +480,9 @@ a.dnb-button {
 *
 */
 :root {
-  --input-font-family: var(--font-family-std);
   --input-font-size: 1rem;
   --input-font-size--medium: 1.5rem;
   --input-font-size--large: 2rem;
-  --input-font-weight: normal;
-  --input-font-style: normal;
   --input-padding: 0 1rem;
   --input-padding--medium: 0 1rem;
   --input-padding--large: 0 1.5rem;
@@ -498,10 +501,7 @@ a.dnb-button {
   align-items: center;
   flex-flow: row wrap;
   width: 100%;
-  font-family: var(--input-font-family);
   font-size: var(--input-font-size);
-  font-weight: var(--input-font-weight);
-  font-style: var(--input-font-style);
   line-height: var(--input-height); }
   .dnb-input__shell {
     position: relative;
diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
index 6b3dad7f408..41f61fdcc4b 100644
--- a/packages/dnb-ui-lib/src/components/input/style/_input.scss
+++ b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -4,12 +4,9 @@
 */
 
 :root {
-  --input-font-family: var(--font-family-std);
   --input-font-size: 1rem;
   --input-font-size--medium: 1.5rem;
   --input-font-size--large: 2rem;
-  --input-font-weight: normal;
-  --input-font-style: normal;
   --input-padding: 0 1rem;
   --input-padding--medium: 0 1rem;
   --input-padding--large: 0 1.5rem;
@@ -30,10 +27,7 @@
   flex-flow: row wrap;
   width: 100%;
 
-  font-family: var(--input-font-family);
   font-size: var(--input-font-size);
-  font-weight: var(--input-font-weight);
-  font-style: var(--input-font-style);
   line-height: var(--input-height);
 
   &__shell {
diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
index 28a8ca555ff..dc14777926a 100644
--- a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -50,7 +50,16 @@ exports[`Logo scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -94,12 +103,12 @@ exports[`Logo scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -128,28 +137,29 @@ exports[`Logo scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 .dnb-logo {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index 67d078e07bf..4641a76daea 100644
--- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -423,7 +423,16 @@ exports[`Modal scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -467,12 +476,12 @@ exports[`Modal scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -501,23 +510,23 @@ exports[`Modal scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 /*
 * DNB Button
@@ -559,9 +568,10 @@ exports[`Modal scss have to match snapshot 1`] = `
     height: 2em; }
 
 .dnb-button {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
@@ -582,10 +592,7 @@ exports[`Modal scss have to match snapshot 1`] = `
 *
 */
 :root {
-  --button-font-family: var(--font-family-std);
   --button-font-size: 1rem;
-  --button-font-weight: normal;
-  --button-font-style: normal;
   --button-width: 2.5rem;
   --button-height: 2.5rem;
   --button-width--small: 2rem;
@@ -612,10 +619,8 @@ exports[`Modal scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-family: var(--button-font-family);
   font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  font-style: var(--button-font-style);
+  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
@@ -625,7 +630,6 @@ exports[`Modal scss have to match snapshot 1`] = `
       height: var(--button-icon-size); }
   .dnb-button__text {
     color: inherit;
-    background-color: inherit;
     transform: translateY(var(--button-border-width)); }
   .dnb-button--size-small {
     width: var(--button-width--small);
@@ -710,9 +714,10 @@ a.dnb-button {
   transition: none; }
 
 .dnb-modal {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
index 1b3ae235e02..fc28ab0a15f 100644
--- a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -70,7 +70,16 @@ exports[`Slider scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -114,12 +123,12 @@ exports[`Slider scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -148,28 +157,29 @@ exports[`Slider scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 .dnb-slider {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
index 4abb92e920e..f1e0249338a 100644
--- a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -90,7 +90,16 @@ exports[`Switch scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -134,12 +143,12 @@ exports[`Switch scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -168,28 +177,29 @@ exports[`Switch scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 .dnb-switch {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
index 394e4839bc6..af961d62255 100644
--- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -173,7 +173,16 @@ exports[`Tabs scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -217,12 +226,12 @@ exports[`Tabs scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -251,28 +260,29 @@ exports[`Tabs scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 .dnb-tabs {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
index 9e0852ea501..197d8ccab0b 100644
--- a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
@@ -14,7 +14,7 @@
     .dnb-tablink {
       // should be same as .lead small
       &-title {
-        font-family: var(--font-family-std); // book
+        font-weight: var(--font-weight-book);
         font-size: 1em;
         line-height: 1.5em;
         text-align: center;
diff --git a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
index 81304aacc0a..1648ebaef89 100644
--- a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
+++ b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
@@ -24,7 +24,16 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
  */
 :root {
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -68,12 +77,12 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
 
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal; }
 
 .dnb-typo-number--lining {
@@ -102,28 +111,29 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
 
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
-  font-weight: 600;
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
   font-style: normal;
   font-display: fallback; }
 
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
-  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
-  font-weight: normal;
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
   font-style: normal;
   font-display: fallback; }
 
 /*
  * Scopes
- * 
+ *
  */
 .dnb-view-title {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/style/core/dnb-style.scss b/packages/dnb-ui-lib/src/style/core/dnb-style.scss
index a3bd32d8527..18b5dd7f59b 100644
--- a/packages/dnb-ui-lib/src/style/core/dnb-style.scss
+++ b/packages/dnb-ui-lib/src/style/core/dnb-style.scss
@@ -26,8 +26,8 @@
     padding: 0;
 
     font-family: var(--font-family-demi);
+    font-weight: var(--font-weight-demi);
     line-height: 1rem; // 16px
-    font-weight: 400;
 
     color: var(--color-emerald-green);
   }
@@ -37,7 +37,7 @@
 
     font-size: 3rem; // 48px
     line-height: 3.5rem; // 56px
-    font-weight: 400;
+    font-weight: var(--font-weight-demi);
   }
 
   h1.small,
@@ -61,9 +61,9 @@
   h3,
   p.dnb-lead {
     font-family: var(--font-family-demi);
+    font-weight: var(--font-weight-demi);
     font-size: 1.25rem; // 20px
     line-height: 2rem; // 32px
-    font-weight: 400;
   }
   h3 > small,
   h3.small,
@@ -97,7 +97,7 @@
 
     b,
     strong {
-      font-weight: 600;
+      font-weight: bold;
     }
   }
 
@@ -134,7 +134,7 @@
   table th {
     padding: 3em 1em 0.5em;
 
-    font-weight: 600;
+    font-weight: var(--font-weight-medium);
     text-align: left;
     color: var(--color-emerald-green);
 
@@ -225,7 +225,7 @@
       margin-top: 1em;
       font-size: 1em;
       font-style: italic;
-      font-weight: 600;
+      font-weight: var(--font-weight-medium);
     }
 
     dl dd {
diff --git a/packages/dnb-ui-lib/src/style/core/properties.scss b/packages/dnb-ui-lib/src/style/core/properties.scss
index 6e4ce6bb4d0..d567dfea8ee 100644
--- a/packages/dnb-ui-lib/src/style/core/properties.scss
+++ b/packages/dnb-ui-lib/src/style/core/properties.scss
@@ -4,9 +4,17 @@
  */
 
 :root {
-  // typography family
+  // Typography Family
   --font-family-std: 'Fedra Sans Std', sans-serif;
-  --font-family-demi: 'Fedra Sans Std Demi', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
+
+  // Typography Weights
+  --font-weight-std: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
 
   // UX colors
   --color-sea-green-alt: #008484;
diff --git a/packages/dnb-ui-lib/src/style/core/scopes.scss b/packages/dnb-ui-lib/src/style/core/scopes.scss
index dffbf6283e5..cbba969293e 100644
--- a/packages/dnb-ui-lib/src/style/core/scopes.scss
+++ b/packages/dnb-ui-lib/src/style/core/scopes.scss
@@ -1,12 +1,13 @@
 /*
  * Scopes
- * 
+ *
  */
 
 @mixin bodyDefault() {
-  font-family: var(--font-family-std, sans-serif);
+  font-family: sans-serif;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-std);
   font-size: 1rem;
-  font-weight: normal;
   font-style: normal;
   line-height: 1.5rem;
   color: var(--color-black-80, #333);
diff --git a/packages/dnb-ui-lib/src/style/core/typography.scss b/packages/dnb-ui-lib/src/style/core/typography.scss
index dae0b8dcc79..a0a5701adbd 100644
--- a/packages/dnb-ui-lib/src/style/core/typography.scss
+++ b/packages/dnb-ui-lib/src/style/core/typography.scss
@@ -15,12 +15,12 @@
 }
 .dnb-typo-medium {
   font-family: var(--font-family-std);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   font-style: normal;
 }
 .dnb-typo-demi {
-  font-family: var(--font-family-demi);
-  font-weight: normal;
+  font-family: var(--font-family-std);
+  font-weight: var(--font-weight-demi);
   font-style: normal;
 }
 
@@ -47,7 +47,7 @@
 
 $fonts-path: '../../assets/fonts/' !default;
 
-// Font #1. Std Book (our main fallback font)
+// Std and Book
 @font-face {
   font-family: 'Fedra Sans Std';
   src: url('#{$fonts-path}/FedraSansStd-Book.eot');
@@ -61,31 +61,30 @@ $fonts-path: '../../assets/fonts/' !default;
   font-display: fallback;
 }
 
-// Font #1. Std Medium (our main fallback font with font weight 600 or more)
-// As we save over 70kB by just faking the medium font, we skip this
+// Demi
 @font-face {
   font-family: 'Fedra Sans Std';
-  src: url('#{$fonts-path}/FedraSansStd-Medium.eot');
-  src: url('#{$fonts-path}/FedraSansStd-Medium.eot?#iefix')
+  src: url('#{$fonts-path}/FedraSansStd-Demi.eot');
+  src: url('#{$fonts-path}/FedraSansStd-Demi.eot?#iefix')
       format('embedded-opentype'),
-    url('#{$fonts-path}/FedraSansStd-Medium.woff2') format('woff2'),
-    url('#{$fonts-path}/FedraSansStd-Medium.woff') format('woff'),
-    url('#{$fonts-path}/FedraSansStd-Medium.ttf') format('truetype');
-  font-weight: 600;
+    url('#{$fonts-path}/FedraSansStd-Demi.woff2') format('woff2'),
+    url('#{$fonts-path}/FedraSansStd-Demi.woff') format('woff'),
+    url('#{$fonts-path}/FedraSansStd-Demi.ttf') format('truetype');
+  font-weight: 500;
   font-style: normal;
   font-display: fallback;
 }
 
-// Font #3. Demi
+// Medium
 @font-face {
-  font-family: 'Fedra Sans Std Demi';
-  src: url('#{$fonts-path}/FedraSansStd-Demi.eot');
-  src: url('#{$fonts-path}/FedraSansStd-Demi.eot?#iefix')
+  font-family: 'Fedra Sans Std';
+  src: url('#{$fonts-path}/FedraSansStd-Medium.eot');
+  src: url('#{$fonts-path}/FedraSansStd-Medium.eot?#iefix')
       format('embedded-opentype'),
-    url('#{$fonts-path}/FedraSansStd-Demi.woff2') format('woff2'),
-    url('#{$fonts-path}/FedraSansStd-Demi.woff') format('woff'),
-    url('#{$fonts-path}/FedraSansStd-Demi.ttf') format('truetype');
-  font-weight: normal;
+    url('#{$fonts-path}/FedraSansStd-Medium.woff2') format('woff2'),
+    url('#{$fonts-path}/FedraSansStd-Medium.woff') format('woff'),
+    url('#{$fonts-path}/FedraSansStd-Medium.ttf') format('truetype');
+  font-weight: 600;
   font-style: normal;
   font-display: fallback;
 }