This site runs best with JavaScript enabled.

Use Cascadia Code with Gatsby

First Published: May 1st, 2020

I wasn't really enjoying the boring monospace font for my code blocks on this site, so I decided to use Cascadia Code from Microsoft. I love it! It looks so much better!

Here's how to do it using Typography.js in Gatsby. (That link also covers how to set up Typography; I won't be doing that here.)

First, go to Cascadia's releases page and download the font (if you don't like the ligatures, download Cascadia Code Mono). It's a TTF (TrueType font).

Copy the font file into wherever you're keeping your fonts. For me, it's in a fonts folder. Then, wherever you're putting your font CSS information (mine is fonts.css inside of that fonts folder), add the font family and refer to the file:

1@font-face {
2 font-family: 'Cascadia Code';
3 font-style: normal;
4 font-weight: 400;
5 src: url('Cascadia.ttf') format('truetype');
6 font-display: fallback;

In your typography.js file, add Cascadia to your fonts object. Mine looks like this now:

1export const fonts = {
2 regular: 'Inter UI Regular',
3 regularItalic: 'Inter UI Regular Italic',
4 semibold: 'Inter UI Semibold',
5 semiboldItalic: 'Inter UI Semibold Italic',
6 bold: 'Inter UI Bold',
7 boldItalic: 'Inter UI Bold Italic',
8 monospace: 'Cascadia Code',

Be sure the string you give it matches the string you set for font-family exactly.

Voila! Now you can just set up your pre and code tags to use Cascadia for code in your articles! For example:

1code {
2 font-size: 1.05rem;
3 line-height: 1rem;
4 background: lightgray;
5 font-family: ${fonts.monospace};

Enjoy your beautiful new code blocks!

← Back to writing
Share article

I send emails about getting better at coding and life.

I'm on a path to become a better human and developer and I want to bring as many friends with me as possible. Want to join me? Sign up below. 👇

Sam Julien © 2020