Rebranding theme

Swapping fonts

Cosmo uses Astro’s built-in astro:fonts API with the Fontsource provider, which serves any Google Font (and many others) self-hosted.

To swap a font, browse Fontsource for the exact name string and which weights and subsets are published and edit the fonts array in astro.config.mjs:

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  fonts: [
    {
      provider: fontProviders.fontsource(),
      name: "Inter",
      cssVariable: "--font-inter",
      subsets: ["latin"],
      weights: [400, 600, 700],
      styles: ["normal"],
    },
  ],
});

Then update the matching <Font> tag in src/layouts/BaseLayout.astro so the new family is preloaded:

<Font cssVariable="--font-inter" preload />

Finally, point the @theme token at the variable in src/styles/global.css so it’s exposed as a Tailwind utility (font-heading, font-body, etc.):

@theme {
  --font-heading: var(--font-inter), sans-serif;
}

Swapping colors

Add or change a color under @theme in src/styles/global.css:

@theme {
  --color-brand-primary: oklch(0.62 0.19 250);
}

Then use it as a utility anywhere:

<h1 class="bg-brand-primary font-display">Hello</h1>

Edit this page on GitHub