new font omg

css/lists.css

@@ -111,6 +111,7 @@
 	grid-area: h2;
 	padding: .25rem .5rem;
 	text-transform: uppercase;
+	font-family: var(--font-family);
 	font-size: 1.5rem;
 	color: var(--color-primary);
 	border-radius: 1rem 1rem 0 0;

css/main.css

@@ -1,7 +1,15 @@
+@font-face {
+	font-family: "Peritel";
+	src:
+		url("/fonts/Peritel/Peritel-Regular.woff2") format("woff2"),
+		url("/fonts/Peritel/Peritel-Regular.otf") format("opentype");
+}
+
 :root {
 	color-scheme: light dark;
 
 	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
+	--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
 	--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
 
 	--color-dark: #2e303e;
@@ -95,11 +103,13 @@ main {
 h1, h2, h3, h4, h5, h6 {
 	line-height: 1.25;
 	color: var(--color-teal);
+	font-family: var(--font-family-headers);
+	letter-spacing: 0.1rem;
 }
 
 h1 {
 	margin-top: 3rem;
-	font-size: 3.5rem;
+	font-size: 3.7rem;
 	text-align: center;
 }
 
@@ -109,23 +119,23 @@ h2, h3, h4, h5, h6 {
 
 h2 {
 	margin-top: 2rem;
-	font-size: 2.2rem;
+	font-size: 2.35rem;
 }
 
 h3 {
 	margin-top: 1.5rem;
-	font-size: 1.6rem;
+	font-size: 1.7rem;
 }
 
 @media (max-width: 650px) {
-	h1 { font-size: 2.8rem; }
+	h1 { font-size: 2.95rem; }
-	h2 { font-size: 1.8rem; }
+	h2 { font-size: 1.9rem; }
-	h3 { font-size: 1.35rem; }
+	h3 { font-size: 1.4rem; }
 }
 
 h4, h5, h6 {
 	margin-top: 1rem;
-	font-size: 1.2rem;
+	font-size: 1.25rem;
 }
 
 /* Images */

eleventy.config.js

@@ -72,6 +72,7 @@ export default async function(eleventyConfig) {
 	/* Passthrough */
 	eleventyConfig
 		.addPassthroughCopy("favicon.ico")
+		.addPassthroughCopy("fonts")
 		.addPassthroughCopy("robots.txt");
 
 	/* Plugins */

fonts/Peritel/LICENSE.md

@@ -0,0 +1,33 @@
+# End User License Agreement (EULA)
+
+This End User License Agreement is a legal agreement between the licensee (you), and the author of this font, Christopher Kirk-Nielsen.
+
+You are granted a perpetual, non-exclusive license to use the font with your purchase.
+
+## By downloading or purchasing this font, you agree to the following terms:
+
+**For use on a website**
+Use on any website owned or under the licensee's control, no pageview limits.
+
+**For use in an app**
+App embed allowed for 1 app. Another app = another license.
+
+**Distribution**
+The font may not be redistributed.
+
+**Personal modification**
+The font may be modified for personal use, but cannot be redistributed.
+
+**Do not use the font for hateful purposes**
+The font is not allowed to be used in any material promoting hate speech of any kind, including but not limited to: racism, xenophobia, homophobia, sexism, or other types of discrimination.
+
+**Do not use the font with AI**
+The font is not allowed to be used in, or in training of, AI/LLMs.
+
+**Use at your own risk**
+Any usage of the fonts are at the licensee's own risk.
+
+For ebooks and other commercial use, or any other specific needs, email me to figure something out: chriskirknielsen+fonts[at]gmail.com
+
+Thank you very much for the support!
+Christopher Kirk-Nielsen (https://chriskirknielsen.com/fonts/)

src/pages/colophon.md

@@ -6,7 +6,7 @@ This is v2 of my personal website, built with [{{ eleventy.generator }}](https:/
 
 v1 of this site began in 2022 and was based on [Millennial](https://lenpaul.github.io/Millennial/), a minimalist Jekyll theme for running a blog or publication by Paul Le.
 
-The fonts are [Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono](https://brailleinstitute.org/freefont) for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :)
+The header font is [Peritel by Christopher Kirk-Nielsen](https://chriskirknielsen.com/fonts/peritel/). I'm currently trying it on for size, so let me know if you like it - or hate it! The body fonts (and the all-caps headers on the post list pages) are [Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono](https://brailleinstitute.org/freefont) for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :)
 
 The search bar is powered by [Pagefind](https://pagefind.app/). I was guided by [Robb Knight's walkthrough](https://rknight.me/blog/using-pagefind-with-eleventy-for-search/) when setting it up.
 

src/pages/style.md

@@ -110,6 +110,8 @@ Code blocks can have syntax highlighting:
 <h1>Hello, world</h1>
 ```
 
+### You can even write `headers in monospace`
+
 ## Tables
 
 Tables in Markdown are kind of annoying to format. You use the pipe (`|`) character as well as dashes.

src/posts/2026/2026-08-05-visual-site-builders-accessibility.md

@@ -71,6 +71,8 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
 
 [Framer](https://framer.com) is a full-featured site designer with a built-in CMS. It offers generative AI features.
 
+I have written [further thoughts on Framer accessibility](/framer-accessibility) as part of a more in-depth review.
+
 | Factor | Notes | Score |
 |---|---|---|
 | Semantic HTML | Tags can be set per-element in the "Accessibility" section of the right-hand pane. Takes work, but is doable with care. | 2 |