Svelte / Astro Font Setup
Copy-paste blocks for SvelteKit's app.html and Astro's layout.
Runs entirely in your browser — no upload, no registration.
SvelteKit
<!-- src/app.html -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">Astro
---
// src/layouts/Base.astro
---
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<!-- OR use astro:assets Font (Astro 5+):
import { Font } from 'astro/assets';
<Font cssVariable="--font-heading" preload />
-->What this tool does
Both HTML approaches plus the modern astro:assets Font component.
Why you might need it
Self-host or CDN — both work, both are fast.
How to use it
- Pick your font.
- Paste the right block.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.