diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss
index d1308ac85..62c9d0403 100644
--- a/packages/cxl-lumo-styles/scss/typography.scss
+++ b/packages/cxl-lumo-styles/scss/typography.scss
@@ -9,9 +9,9 @@ html {
    *
    * @see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/typography.html#font-family
    */
-  --lumo-font-family: "lato", sans-serif;
-  --cxl-lumo-font-secondary: "lato", sans-serif;
-  --cxl-lumo-font-ternary: raleway, sans-serif;
+  --lumo-font-family: 'lato', sans-serif;
+  --cxl-lumo-font-secondary: 'lato', sans-serif;
+  --cxl-lumo-font-ternary: 'Montserrat', sans-serif;
 
   /**
    * Font size.
@@ -84,10 +84,10 @@ h4 {
     font-size: var(--lumo-font-size-xl);
   }
 
-  font-weight: 700;
+  font-weight: 500;
 
   b, strong {
-    font-weight: 900;
+    font-weight: 700;
   }
 }
 
diff --git a/packages/storybook/.storybook/preview-head.html b/packages/storybook/.storybook/preview-head.html
index b92acdd62..3166115f9 100644
--- a/packages/storybook/.storybook/preview-head.html
+++ b/packages/storybook/.storybook/preview-head.html
@@ -3,4 +3,4 @@
   // @see https://bugs.chromium.org/p/chromium/issues/detail?id=946975
   delete Document.prototype.adoptedStyleSheets;
 </script>
-<link rel="stylesheet" id="cxl-font-css"  href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i,900&family=Libre+Baskerville:400,400i,700&family=Lato&family=Raleway:wght@400;500;700;900" type="text/css" media="all">
+<link rel="stylesheet" id="cxl-font-css"  href="https://fonts.googleapis.com/css?family=Lato|Montserrat:400,400i,500,500i,700,700i,900,900i&display=swap" type="text/css" media="all">
diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js
index 1627a3333..da9656132 100644
--- a/packages/storybook/cxl-lumo-styles/typography.stories.js
+++ b/packages/storybook/cxl-lumo-styles/typography.stories.js
@@ -17,9 +17,13 @@ export const Base = () => html`
   <h2>Heading 2</h2>
   <h2>Heading 2 with <strong>highlight</strong></h2>
   <h3>Heading 3</h3>
+  <h3>Heading 3 with <strong>highlight</strong></h3>
   <h4>Heading 4</h4>
+  <h4>Heading 4 with <strong>highlight</strong></h4>
   <h5>Heading 5</h5>
+  <h5>Heading 5 with <strong>highlight</strong></h5>
   <h6>Heading 6</h6>
+  <h6>Heading 6 with <strong>highlight</strong></h6>
   <p>Paragraph text.</p>
   <p><a href="https://cxl.com">Paragraph link</a></p>
   <p><a href="https://cxl.com" target="_blank">Paragraph link external.</a></p>