Profile Picture

Alex Saveau

Alex Saveau

Build better tooling

Blog

Customize GitHub's code font

😋 code reviews

Published May 17, 2020 • Last updated Feb 26, 2023 • 1 min read

It occurred to me yesterday that I’ve spent way too much time nitpicking over my IDE’s font, but then come time for code reviews… not a ligature in sight. Here’s a quick guide to change that.

Prerequisites

Install Refined GitHub. It’s probably a sin at this point to not use that extension. 😉

Change your font

In Refined GitHub’s settings (chrome://extensions/?options=hlepfoohegkhhmjieoechaddaejaokhf), paste in this custom CSS:

/*
The wght@450 part is the font weight.
If you want less or more boldness, decrease or increase this number.
*/
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@450&display=swap");

pre, code, .blob-code, .blob-code-content, .blob-code-marker {
  font-family: 'Fira Code', monospace !important;
}

I personally love Fira Code, but you can change this to whatever you want as long as the font is hosted somewhere.

BeforeAfter
Default GitHub fontCustom GitHub code font

That’s it! Enjoy.