#How to use Astro's Experimental fonts API with svelte script

8 messages · Page 1 of 1 (latest)

orchid swan
#

as titled

summer flickerBOT
#

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

#

Astro’s Experimental fonts API is configured at the Astro level and then exposed via CSS variables, so it works the same regardless of whether you use Svelte, React, etc.

1. Configure fonts in astro.config.mjs

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

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

[Fonts usage]

2. Add <Font /> in your layout/head

---
// src/components/Head.astro
import { Font } from 'astro:assets';
---
<head>
  <Font cssVariable="--font-roboto" preload />
  <!-- other head tags -->
</head>

[Fonts usage]

This generates the @font-face CSS and defines the --font-roboto variable.

3. Use the font in Svelte components via CSS

In a Svelte component, just reference the CSS variable:

<!-- src/components/MyComponent.svelte -->
<script>
  // normal Svelte script; nothing special needed for fonts
</script>

<div class="content">
  Hello with Roboto
</div>

<style>
  .content {
    font-family: var(--font-roboto);
  }
</style>

Because the font is exposed as a CSS variable, Svelte just uses it like any other CSS value; there is no Svelte‑specific API for the fonts in the docs, only the global CSS variable approach. [Fonts usage]

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

#

@orchid swan Kapa.ai is still learning and improving, please let me know how I did by reacting below.

orchid swan
#

@summer flicker but font relate in script is in script part (and it's typescript) like this
ctx.font = `700 ${24 * scale}px 'Roboto', sans-serif`;
and i want to import font with api

summer flickerBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Astro’s experimental fonts API only gives you a CSS variable that points to the generated @font-face family; it does not expose anything directly to TypeScript or canvas APIs. [Fonts usage]

From the docs, the flow is:

  1. Configure the font and cssVariable:
// astro.config.mjs
import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  experimental: {
    fonts: [
      {
        provider: fontProviders.google(),
        name: "Roboto",
        cssVariable: "--font-roboto",
      },
    ],
  },
});
``` [[Fonts usage](<https://docs.astro.build/en/reference/experimental-flags/fonts/#usage>)]

2. Register it in `<head>`:

```astro
---
// e.g. src/components/Head.astro
import { Font } from 'astro:assets';
---
<Font cssVariable="--font-roboto" preload />
``` [[Fonts usage](<https://docs.astro.build/en/reference/experimental-flags/fonts/#usage>)]

3. Use the variable in CSS:

```css
body {
  font-family: var(--font-roboto);
}
``` [[Fonts usage](<https://docs.astro.build/en/reference/experimental-flags/fonts/#usage>)]

The docs do not describe a way to read `var(--font-roboto)` from TypeScript and turn it into a string like:

```ts
ctx.font = `700 ${24 * scale}px 'Roboto', sans-serif`;

So, based on the available information:

  • You can load Roboto via the experimental fonts API.
  • You must still hard‑code the family name ('Roboto') in your canvas ctx.font string; there is no documented API to get that from Astro’s font config or from the <Font /> component.
#

If you need the exact same value in both CSS and TS, the docs don’t show a built‑in way to share it; you’d have to manage that yourself (e.g. keep the family name in a shared TS constant) outside of what’s documented.

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