make font packs more exciting

2026-01-12 04:09:12 +00:00 · 2025-06-23 23:49:28 -04:00
parent dd4c429b1f
commit b342c30fc0
3 changed files with 43 additions and 43 deletions
--- 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,
--- 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>
--- 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.