diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 7f2e6fcaa2..85df3cc57d 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -26,7 +26,6 @@
"@codemirror/search": "^6.5.2",
"@codemirror/state": "^6.2.1",
"@codemirror/view": "^6.17.1",
- "@fontsource/roboto-mono": "^5.0.8",
"@jridgewell/sourcemap-codec": "^1.4.15",
"@lezer/common": "^1.0.4",
"@lezer/highlight": "^1.1.6",
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
index 4d7e40ff4f..cbf4ca08a6 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
@@ -5,9 +5,7 @@ import { read } from '$app/server';
import satori from 'satori';
import { html as toReactNode } from 'satori-html';
import Card from './Card.svelte';
-// @ts-expect-error no types for the query exist
-import CardCSS from './Card.svelte?raw&svelte&type=style';
-import OverpassRegular from './Overpass-Regular.ttf?url';
+import YantramanavRegular from './Yantramanav-Regular.ttf?url';
import { blog_posts } from '$lib/server/content';
export const prerender = true;
@@ -20,7 +18,7 @@ export function entries() {
const height = 630;
const width = 1200;
-const data = await read(OverpassRegular).arrayBuffer();
+const data = await read(YantramanavRegular).arrayBuffer();
export async function GET({ params }) {
const post = blog_posts.find((post) => post.slug === `blog/${params.slug}`);
@@ -28,7 +26,7 @@ export async function GET({ params }) {
if (!post) error(404);
const result = render(Card, { props: { title: post.metadata.title, date: post.date_formatted } });
- const element = toReactNode(`${result.body}`);
+ const element = toReactNode(`${result.head}${result.body}`);
const svg = await satori(element, {
fonts: [
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
index 79b9c105ab..1ff8091fc5 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte
@@ -1,3 +1,5 @@
+
+
@@ -16,7 +18,7 @@
display: flex;
width: 100%;
height: 100%;
- font-family: 'Overpass';
+ font-family: 'Yantramanav';
background: white;
}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/Yantramanav-Regular.ttf b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Yantramanav-Regular.ttf
new file mode 100644
index 0000000000..d7e4c6657f
Binary files /dev/null and b/apps/svelte.dev/src/routes/blog/[slug]/card.png/Yantramanav-Regular.ttf differ
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9809a6479b..b32af47c82 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,9 +44,6 @@ importers:
'@codemirror/view':
specifier: ^6.17.1
version: 6.26.3
- '@fontsource/roboto-mono':
- specifier: ^5.0.8
- version: 5.0.18
'@jridgewell/sourcemap-codec':
specifier: ^1.4.15
version: 1.4.15
@@ -805,9 +802,6 @@ packages:
'@fontsource/fira-mono@5.1.0':
resolution: {integrity: sha512-6+nftSKApXyN0I9FC5GJuG5TUCh+in5OehtrXRIsHJvq38Pm//oA1kZZYNdXv99JYzLzJ3lzsTAavmS+xGLGDw==}
- '@fontsource/roboto-mono@5.0.18':
- resolution: {integrity: sha512-hKuwk/cy3i6fWPzazT5xjgWq4YNqZWDHVbJh2Wwj3KYvWGi2v3ToBw/4LKQ+ggEkPLcIG6VU8GpCT3Xtf+mbbA==}
-
'@fontsource/yantramanav@5.1.0':
resolution: {integrity: sha512-wSmYmoGhFbYF4XUXouudROqTn6GREe0HTV/HqcnRLYbQJNa3kmqbcebIm9PxPDQ0l3y2speJAlbOoDGM2DN9dg==}
@@ -3312,8 +3306,6 @@ snapshots:
'@fontsource/fira-mono@5.1.0': {}
- '@fontsource/roboto-mono@5.0.18': {}
-
'@fontsource/yantramanav@5.1.0': {}
'@img/sharp-darwin-arm64@0.33.4':