Customize GitHub’s code font

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-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.

Before	After

---

That’s it! Enjoy.

Comments

[socertis]

there is another important thing that i want to add to this answer,
that if you want to change the font size of code on github (which is the thing that i was searching for it for quite sometime), you can easily add
font-size: 14px;
right under the font-family:.... line.

[dinhanhx]

I follow your method, it doesn't work.