Changing the default github code font

Question

I am unhappy with the default code font of github which is Courier New. I want to change it to Monaco, which is my preferred monospace font. Is it possible to change my github code font? If yes, how?

What's supposed to happen when I, being the unrefined person I am, try to view your project on github without having that font available (you know, like on a non-apple device)? — , Sep 10 '11 at 14:15
I want to see github code in Monaco in my browswer. Those settings shouldn't affect any other user. They would still see it in Courier New (or whatever font they have configured (assuming such a configuration is possible)). — missingfaktor, Sep 10 '11 at 14:18
You can use this Chrome extension https://github.com/AmraniCh/github-code-font-changer — Shakir El Amrani, Jul 01 '21 at 23:44

score 10 · Accepted Answer · answered Mar 14 '12 at 19:29

10

Solution for chrome:

Install Stylist @ https://chrome.google.com/webstore/detail/pabfempgigicdjjlccdgnbmeggkbjdhd
Install userscript @ http://userstyles.org/styles/39502/github-a-different-font-stack-for-code-listings

Enjoy!

answered Mar 14 '12 at 19:29

analogue

124
1
3

Does not work on Android---where the font is particularly hard to read. – rwst Jun 05 '16 at 13:44

score 5 · Answer 2 · answered Jun 24 '15 at 08:56

I have this same problem with Firefox, so here is the userscript for Greasemonkey I'm using. Just paste it in the script editor window.

// ==UserScript==
// @name        Github font changer
// @namespace   local.greasemonkey.githubfontchanger
// @include     https://github.com/*
// @version     1
// @grant       none
// ==/UserScript==

var fontdef ="Monaco, Monospace ! important"; // Set your font here.

// Function helper to inject css
function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

// Apply the font-family definition to code styles.
addGlobalStyle(
  '.blob-code { font-family: ' + fontdef + '; } ' +
  '.blob-num { font-family: ' + fontdef + '; } ' +
  '');

score 5 · Answer 3 · answered Sep 10 '11 at 14:55

5

There's no Github setting to do this, you'd have to consider writing your own custom stylesheet. That would be browser specific and you'd have to sync it across all your computers manually, so it's not ideal.

answered Sep 10 '11 at 14:55

spike

9,794
9
54
85

score 4 · Answer 4 · answered Mar 10 '22 at 10:34

The CSS in the accepted answer isn't working for me. This works,

Install Stylus extension and add this code for Github.com.

/* can import but if the font already exists on your system, this line is not needed */
@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;
}

score 2 · Answer 5 · answered Jul 01 '21 at 23:43

I was also unhappy with GitHub code font, and I've decided to build a Chrome extension that allows changing and customizing the GitHub code viewer font, however the extension at this time provides a few fonts that you can choose from, but I'll add more in the future.

You can find this extension in this GitHub repo.

score 2 · Answer 6 · answered Sep 10 '11 at 22:00

Providing you use a compatible browser you could use greasemonkey script to target the code blocks on github.com and render them with monaco rather than courier new.

score 1 · Answer 7 · answered Jun 11 '23 at 04:42

I know it's an old question, but you should consider adding the extension:

Refined GitHub (github.com/refined-github/refined-github)

Then you can add something such as

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

score 0 · Answer 8 · answered Sep 01 '23 at 21:33

You can create a bookmarklet and add it to your browsers bookmark bar. I've created a number for GitHub specifically.

Put this in the URL field of a bookmark and store it in your bookmarks bar. By default it will use JetBrains Mono as your font for GitHub. Update the bookmarklet to your font of choice.

You do have to "click" this bookmarklet every time github loads a page to review... which might dissuade you from using it.

(function(d){const s=d.createElement("style");s.innerHTML=`pre, code, .blob-code, .blob-code-content, .blob-code-marker {font-family: "JetBrains Mono", monospace !important}`;d.head.append(s)})(document);

Changing the default github code font

8 Answers8

Refined GitHub (github.com/refined-github/refined-github)