#fonts

4 messages · Page 1 of 1 (latest)

silk rivet
#

How do I use the new fonts feature with solidjs components?

tepid belfryBOT
#

Hi @silk rivet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The Astro Fonts API (stable since Astro 6.0) works the same way regardless of which UI framework you use in your components, including SolidJS. The font configuration is done at the Astro project level, not at the component level. Here's how to set it up:

1. Configure your font in astro.config.mjs

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

export default defineConfig({
  fonts: [{
    provider: fontProviders.google(),
    name: "Roboto",
    cssVariable: "--font-roboto",
  }]
});

[fonts config reference]

2. Add the <Font /> component to your page <head>

This is typically done in a layout or Head.astro component:

---
import { Font } from "astro:assets";
---

<html>
  <head>
    <Font cssVariable="--font-roboto" preload />
  </head>
  <body>
    <slot />
  </body>
</html>

[Font component reference]

3. Use the CSS variable in your SolidJS component

Once the font is registered and the <Font /> component is in the <head>, the CSS variable --font-roboto is available globally. You can use it in your SolidJS component's styles just like any other CSS variable:

// MyComponent.jsx (SolidJS)
export default function MyComponent() {
  return (
    <h1 style={{ "font-family": "var(--font-roboto)" }}>
      Hello from SolidJS!
    </h1>
  );
}
#

The key point is that the font setup (configuration + <Font /> in the head) is handled at the Astro level, and the resulting CSS variable is then available to any component — including SolidJS ones — via standard CSS. [applying custom fonts]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: