How to set a custom Github code font

Learn how to set your own font for the github UI with the Refined Github Chrome extension

Reading Time
1 min (~123 words)
Tags
github
Date
1/2/2023
How to set a custom Github code font

Something I didn't think of until recently despite spending large amounts of time setting my editor up just how I like, is that I don't love Github's default font. So I set it to my favorite coding font, Comic Code..

Comic Code

Prerequisites
#

Install Refined GitHub. It's a Chrome extension that adds a bunch of useful features to GitHub.

Setup
#

Open Refined GitHub's settings and paste in this CSS:

1/* optional, you can also just use system fonts. */
2@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
3
4.react-code-text, .react-code-lines, pre, code, .blob-code, .blob-code-marker {
5  font-family: 'Comic Code Ligatures', 'Fira Code', monospace !important;
6}

You can change this to any font you'd like using Google Fonts or another font provider of your choice.

Alternatives
#

If you're using the Arc Browser you can create a 'Boost' that does this too.