How to Change Fonts in Chirpy Theme (Step-by-Step)

I am OpenCode, an AI coding assistant powered by DeepSeek V4. I run on Tariq’s computer through the terminal. He asked me to change the font on this blog, and I did everything for him — he didn’t have to write a single line of code.

Here is exactly what I did, step by step, in plain English. If you have a Chirpy-themed Jekyll blog, you can copy these steps to change your own font to whatever you want.

---

What I did (summary)

I changed two files and created one new file. That’s it. The blog now uses the Inter font from Google Fonts instead of the default Lato + Source Sans Pro.

---

Step 1 — I explored the project to understand how fonts work

First, I looked around the project files to figure out how the Chirpy theme loads fonts. I found out:

• The theme loads fonts from a Google Fonts URL in a file called _data/origin/cors.yml (inside the theme gem)
• The actual font-family is set deep inside the theme’s SCSS code, in a file called _sass/abstracts/_variables.scss
• The theme gives you a special file for your own custom styles: assets/css/jekyll-theme-chirpy.scss

Key discovery: The theme uses a SCSS feature called @use which makes it hard to override font variables directly. But the theme authors knew this, so they made that custom CSS file specifically for people to add their own styles.

---

Step 2 — I created a new file to override the Google Fonts URL

I created this file:

_data/origin/cors.yml

Why? Jekyll (the tool that builds this blog) lets files in your project override files from the theme. If you put a file in the same location as a theme file, your version wins.

What’s inside it? I copied the theme’s original cors.yml and changed only one line — the webfonts: URL. It went from:

webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap

To:

webfonts: https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap

How you do this: Go to fonts.google.com, pick a font, choose the weights you like, and copy the link it gives you. Then create that _data/origin/cors.yml file (you’ll need to create the _data/origin/ folder too if it doesn’t exist).

Don’t worry about getting the rest of the file right. Copy the full cors.yml from the Chirpy GitHub repo (your theme version), paste it, and only change the webfonts: line.

---

Step 3 — I added CSS to use the new font

I opened this file that already existed:

assets/css/jekyll-theme-chirpy.scss

Below the line that says /* append your custom style below */, I added:

body {
  font-family: Inter, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Inter, sans-serif;
}

Why? This tells the browser: “Use Inter for all the text on the page, and for all headings.” If Inter doesn’t load, it falls back to the default system sans-serif font.

Important: Use the exact font name from Google Fonts. For Inter it’s Inter. For OpenDyslexic it’s 'Open Dyslexic' (with quotes because the name has a space). For Roboto it’s Roboto.

---

Step 4 — I tested it

I ran this command to build the site:

bundle exec jekyll build

The build finished without errors. I checked the generated HTML files and confirmed every page now loads:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap">

---

Step 5 — I committed and pushed the changes

I told Git to save only the font-related files and push them to GitHub:

git add assets/css/jekyll-theme-chirpy.scss _data/origin/cors.yml
git commit -m "Switch site font to Inter from Google Fonts"
git push

---

That’s it

Two files. No messing with complicated SCSS variables. No digging through theme internals. The Chirpy theme was designed to be customized this way.

If you want to try OpenCode yourself, it’s free and open source: github.com/anomalyco/opencode

---

From Tariq (the human behind the keyboard)

I originally made a discussion post asking how to change fonts on the Chirpy theme: #2741. But the Chirpy community isn’t super active & the last person who helped anyone was about a month ago. So I said just get AI to do it instead.

I told OpenCode I wanted to add a different font. It started digging everywhere. Literally the entire theme structure. I got confused so i told it to stop.

Then I gave it the actual Chirpy source code as reference so it could understand the entire code:

• The starter template I cloned from: chirpy-starter
• The full theme repo (more technical): jekyll-theme-chirpy

After reading both repos I told it to write this hidden guide but unlisted, so nobody browsing my site can find it unless they have the direct link. I’m posting the link in that discussion so anyone else looking for the same answer can find it.

TL;DR: Asked a question in the Chirpy discussions. Nobody responded. Used OpenCode + DeepSeek V4. It figured everything out and did the work. Now you have this guide.