Blogs/micro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch to Playwrite US Modern + Imprima fonts

Browse source 
- Headings: Playwrite US Modern (extralight/200 weight)
- Body: Imprima (400 weight)
- Keep Geist Mono for code blocks

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Neeldhara Misra 2026-02-20 16:13:14 +05:30
parent bf14d02121
commit 94bbcd7be2
9 changed files with 46 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/Head.astro
View file

@ -2,24 +2,16 @@
import "../styles/global.css";
import { ClientRouter } from "astro:transitions";
import "@fontsource/geist-sans/100.css";
import "@fontsource/geist-sans/200.css";
import "@fontsource/geist-sans/300.css";
import "@fontsource/geist-sans/400.css";
import "@fontsource/geist-sans/500.css";
import "@fontsource/geist-sans/600.css";
import "@fontsource/geist-sans/700.css";
import "@fontsource/geist-sans/800.css";
import "@fontsource/geist-sans/900.css";
import "@fontsource/geist-mono/100.css";
import "@fontsource/geist-mono/200.css";
import "@fontsource/geist-mono/300.css";
// Body font
import "@fontsource/imprima/400.css";
// Heading font (extralight = 200)
import "@fontsource/playwrite-us-modern/200.css";
import "@fontsource/playwrite-us-modern/300.css";
import "@fontsource/playwrite-us-modern/400.css";
// Keep mono font for code blocks
import "@fontsource/geist-mono/400.css";
import "@fontsource/geist-mono/500.css";
import "@fontsource/geist-mono/600.css";
import "@fontsource/geist-mono/700.css";
import "@fontsource/geist-mono/800.css";
import "@fontsource/geist-mono/900.css";
interface Props {
title: string;

2
src/pages/blog/[...id].astro
View file

@ -68,7 +68,7 @@ const { Content, headings } = await render(post);
</div>
)}
</div>
<h1 class="animate text-3xl font-semibold text-black dark:text-white">
<h1 class="animate text-3xl font-heading font-extralight text-black dark:text-white">
{post.data.title}
</h1>
{

8
src/pages/index.astro
View file

@ -23,7 +23,7 @@ const projects: CollectionEntry<"projects">[] = (
<Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
<Container>
<aside data-pagefind-ignore>
<h1 class="font-semibold text-black dark:text-white">
<h1 class="font-heading font-extralight text-black dark:text-white">
👋
</h1>
<div class="space-y-16">
@ -37,7 +37,7 @@ const projects: CollectionEntry<"projects">[] = (
<section class="animate space-y-6">
<div class="flex flex-wrap items-center justify-between gap-y-2">
<h2 class="font-semibold text-black dark:text-white">
<h2 class="font-heading font-extralight text-black dark:text-white">
Latest posts
</h2>
<Link href="/blog"> See all posts </Link>
@ -55,7 +55,7 @@ const projects: CollectionEntry<"projects">[] = (
<section class="animate space-y-6">
<div class="flex flex-wrap items-center justify-between gap-y-2">
<h2 class="font-semibold text-black dark:text-white">
<h2 class="font-heading font-extralight text-black dark:text-white">
Recent projects
</h2>
<Link href="/projects"> See all projects </Link>
@ -72,7 +72,7 @@ const projects: CollectionEntry<"projects">[] = (
</section>
<section class="animate space-y-4">
<h2 class="font-semibold text-black dark:text-white">
<h2 class="font-heading font-extralight text-black dark:text-white">
Let's Connect
</h2>
<article>

2
src/pages/projects/[...id].astro
View file

@ -40,7 +40,7 @@ const { Content, headings } = await render(project);
</div>
)}
</div>
<h1 class="text-3xl font-semibold text-black dark:text-white">
<h1 class="text-3xl font-heading font-extralight text-black dark:text-white">
{project.data.title}
</h1>
{

2
src/pages/tags/[...id].astro
View file

@ -33,7 +33,7 @@ const sortedPosts = posts.sort(
<Container>
<div class="space-y-10" data-pagefind-ignore>
<BackToPrevious href="/tags"> All tags </BackToPrevious>
<h1 class="animate font-semibold text-black dark:text-white">
<h1 class="animate font-heading font-extralight text-black dark:text-white">
Posts tagged with "{id}"
</h1>
<ul class="animate flex flex-col gap-4">

2
src/pages/tags/index.astro
View file

@ -10,7 +10,7 @@ const tags = [...new Set(posts.flatMap((post) => post.data.tags || []))].sort();
<Layout title="Tags" description="List of tags used.">
<Container>
<div class="space-y-10">
<h1 class="animate font-semibold">All Tags</h1>
<h1 class="animate font-heading font-extralight text-black dark:text-white">All Tags</h1>
<div class="animate flex flex-wrap gap-2">
{
tags.map((tag) => (

9
src/styles/global.css
View file

@ -5,8 +5,9 @@
@custom-variant dark (&:is(.dark *));
@theme {
--font-sans: Geist Sans, ui-sans-serif, system-ui, sans-serif,
--font-sans: Imprima, ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-heading: 'Playwrite US Modern', cursive;
--font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco,
Consolas, 'Liberation Mono', 'Courier New', monospace;
}
@ -29,6 +30,10 @@
}
}
@utility font-heading {
font-family: var(--font-heading);
}
@layer utilities {
html {
overflow-y: auto;
@ -68,7 +73,7 @@
article {
@apply prose prose-neutral max-w-full dark:prose-invert prose-img:mx-auto prose-img:my-auto;
@apply prose-headings:font-semibold;
@apply prose-headings:font-heading prose-headings:font-extralight;
@apply prose-headings:text-black dark:prose-headings:text-white;
}
}