diff --git a/packages/webawesome/docs/_data/themer.js b/packages/webawesome/docs/_data/themer.js
index e457f5ef7..8475b2a47 100644
--- a/packages/webawesome/docs/_data/themer.js
+++ b/packages/webawesome/docs/_data/themer.js
@@ -74,12 +74,12 @@ export const themes = [
       body: {
         name: 'Quicksand',
         css: 'Quicksand, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
       },
       heading: {
         name: 'Quicksand',
         css: 'Quicksand, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
       },
       code: {
         name: 'OS Default',
@@ -87,9 +87,9 @@ export const themes = [
         href: null,
       },
       longform: {
-        name: 'OS Default',
-        css: 'ui-serif, serif',
-        href: null,
+        name: 'Crimson Pro',
+        css: '"Crimson Pro", serif',
+        href: 'https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
       },
     },
     icons: {
@@ -108,7 +108,7 @@ export const themes = [
       '--wa-font-family-body': 'Quicksand, sans-serif',
       '--wa-font-family-heading': 'var(--wa-font-family-body)',
       '--wa-font-family-code': 'ui-monospace, monospace',
-      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-family-longform': '"Crimson Pro", serif',
       '--wa-font-weight-body': 500,
       '--wa-font-weight-heading': 700,
       '--wa-font-weight-code': 500,
@@ -194,22 +194,22 @@ export const themes = [
       body: {
         name: 'Inter',
         css: 'Inter, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
       heading: {
         name: 'Inter',
         css: 'Inter, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
       code: {
-        name: 'OS Default',
-        css: 'ui-monospace, monospace',
-        href: null,
+        name: 'Geist Mono',
+        css: '"Geist Mono", monospace',
+        href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
       longform: {
-        name: 'OS Default',
-        css: 'ui-serif, serif',
-        href: null,
+        name: 'Aleo',
+        css: 'Aleo, serif',
+        href: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
       },
     },
     icons: {
@@ -227,8 +227,8 @@ export const themes = [
       // Fonts
       '--wa-font-family-body': 'Inter, sans-serif',
       '--wa-font-family-heading': 'var(--wa-font-family-body)',
-      '--wa-font-family-code': 'ui-monospace, monospace',
-      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-family-code': '"Geist Mono", monospace',
+      '--wa-font-family-longform': 'Aleo, serif',
       '--wa-font-weight-body': 400,
       '--wa-font-weight-heading': 650,
       '--wa-font-weight-code': 400,
@@ -254,22 +254,22 @@ export const themes = [
       body: {
         name: 'Space Grotesk',
         css: '"Space Grotesk", sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
       },
       heading: {
         name: 'IBM Plex Sans Condensed',
         css: '"IBM Plex Sans Condensed", sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
       },
       code: {
         name: 'Space Mono',
         css: '"Space Mono", monospace',
-        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
       },
       longform: {
-        name: 'OS Default',
-        css: 'ui-serif, serif',
-        href: null,
+        name: 'Roboto Serif',
+        css: '"Roboto Serif", serif',
+        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
       },
     },
     icons: {
@@ -288,7 +288,7 @@ export const themes = [
       '--wa-font-family-body': 'Space Grotesk, sans-serif',
       '--wa-font-family-heading': 'IBM Plex Sans Condensed, sans-serif',
       '--wa-font-family-code': 'Space Mono, monospace',
-      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-family-longform': '"Roboto Serif", serif',
       '--wa-font-weight-body': 400,
       '--wa-font-weight-heading': 500,
       '--wa-font-weight-code': 400,
@@ -314,22 +314,22 @@ export const themes = [
       body: {
         name: 'Figtree',
         css: 'Figtree, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
       },
       heading: {
         name: 'Figtree',
         css: 'Figtree, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
       },
       code: {
-        name: 'OS Default',
-        css: 'ui-monospace, monospace',
-        href: null,
+        name: 'Chivo Mono',
+        css: '"Chivo Mono", monospace',
+        href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
       },
       longform: {
-        name: 'OS Default',
-        css: 'ui-serif, serif',
-        href: null,
+        name: 'Fraunces',
+        css: 'Fraunces, serif',
+        href: 'https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
       },
     },
     icons: {
@@ -347,8 +347,8 @@ export const themes = [
       // Fonts
       '--wa-font-family-body': 'Figtree, sans-serif',
       '--wa-font-family-heading': 'var(--wa-font-family-body)',
-      '--wa-font-family-code': 'ui-monospace, monospace',
-      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-family-code': '"Chivo Mono", monospace',
+      '--wa-font-family-longform': 'Fraunces, serif',
       '--wa-font-weight-body': 400,
       '--wa-font-weight-heading': 800,
       '--wa-font-weight-code': 400,
@@ -494,22 +494,22 @@ export const themes = [
       body: {
         name: 'Nunito',
         css: 'Nunito, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
       heading: {
         name: 'Fredoka',
         css: 'Fredoka, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
       code: {
         name: 'Azeret Mono',
         css: '"Azeret Mono", monospace',
-        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
       longform: {
-        name: 'OS Default',
-        css: 'ui-serif, serif',
-        href: null,
+        name: 'BioRhyme',
+        css: 'BioRhyme, serif',
+        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
       },
     },
     icons: {
@@ -528,7 +528,7 @@ export const themes = [
       '--wa-font-family-body': 'Nunito, sans-serif',
       '--wa-font-family-heading': 'Fredoka, sans-serif',
       '--wa-font-family-code': 'Azeret Mono, monospace',
-      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-family-longform': 'BioRhyme, serif',
       '--wa-font-weight-body': 500,
       '--wa-font-weight-heading': 600,
       '--wa-font-weight-code': 500,
diff --git a/packages/webawesome/docs/examples/themes/showcase.njk b/packages/webawesome/docs/examples/themes/showcase.njk
index f45a442a0..7ff109b3c 100644
--- a/packages/webawesome/docs/examples/themes/showcase.njk
+++ b/packages/webawesome/docs/examples/themes/showcase.njk
@@ -151,7 +151,7 @@ layout: false
           <wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m)">
             <wa-icon slot="icon" name="hat-wizard" style="font-size: 1.75em"></wa-icon>
           </wa-avatar>
-          <p class="wa-body-l" style="margin: 0">
+          <p class="wa-body-l" style="margin: 0; font-family: var(--wa-font-family-longform); font-weight: var(--wa-font-weight-longform)">
             &ldquo;All we have to decide is what to do with the time that is given to us. There are other forces at work
             in this world, Frodo, besides the will of evil.&rdquo;
           </p>
diff --git a/packages/webawesome/src/styles/themes/awesome.css b/packages/webawesome/src/styles/themes/awesome.css
index db198e7f3..c523fa71d 100644
--- a/packages/webawesome/src/styles/themes/awesome.css
+++ b/packages/webawesome/src/styles/themes/awesome.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap');
 
 @layer wa-theme {
   .wa-theme-awesome,
@@ -187,7 +187,7 @@
     --wa-font-family-body: 'Quicksand', sans-serif;
     --wa-font-family-heading: var(--wa-font-family-body);
     --wa-font-family-code: ui-monospace, monospace;
-    --wa-font-family-longform: ui-serif, serif;
+    --wa-font-family-longform: 'Crimson Pro', serif;
 
     /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
      * For larger font sizes, each size is twice 1.125x larger to maximize impact.