diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
index e1d38e763..8e750b2e9 100644
--- a/packages/cxl-lumo-styles/scss/global.scss
+++ b/packages/cxl-lumo-styles/scss/global.scss
@@ -113,7 +113,7 @@ strong {
   h2 &,
   h3 & {
     color: var(--lumo-primary-color);
-    font-weight: 900;
+    font-weight: inherit;
   }
 }
 
diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss
index d1308ac85..45a14d4bf 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.
@@ -70,13 +70,13 @@ h1 {
 
 h2 {
   font-size: var(--cxl-lumo-font-size-xxl);
-  font-weight: 900;
+  font-weight: 700;
   line-height: var(--cxl-lumo-line-height-xxs);
 }
 
 h3 {
   font-size: var(--lumo-font-size-xl);
-  font-weight: 900;
+  font-weight: 700;
 }
 
 h4 {
@@ -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/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
index e268e97e4..11c6086c6 100644
--- a/packages/cxl-ui/scss/cxl-base-card.scss
+++ b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -157,6 +157,7 @@ header {
 
     .name {
       @include mixins.ellipsis-for-lines(2);
+      font-family: var(--lumo-font-family);
       margin-block: 0;
 
       a {
diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss
index 546aad010..cb5323f11 100644
--- a/packages/cxl-ui/scss/cxl-featured-course-card.scss
+++ b/packages/cxl-ui/scss/cxl-featured-course-card.scss
@@ -40,8 +40,12 @@
       padding: 0;
     }
 
-    .name strong {
-      color: var(--lumo-primary-color);
+    .name {
+      font-family: var(--cxl-lumo-font-ternary);
+
+      strong {
+        color: var(--lumo-primary-color);
+      }
     }
 
     .info {
diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
index 781fd864e..eb2662270 100644
--- a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
+++ b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
@@ -44,6 +44,7 @@ cxl-vaadin-accordion {
     .entry-title {
       flex: 1;
       height: calc(var(--cxl-lumo-line-height-xs) * 4em);
+      font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-xl);
       word-break: break-word;
     }
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>