Search code examples
githubfonts

Unable to update the font-family and its size on GitHub using Chrome/Brave

I am accessing GitHub via Chrome/Brave. To change the family and size of the fonts of the code on GitHub I am using Refined GitHub chrome extension. The article I followed is: Customize GitHub's code font

All was going well, but now the font are rendered in the default GitHub style instead of the one I was using.

I am still able to render my expected font-style in this window: enter image description here

But when I navigate to one of the files containing the source code, I get this: enter image description here

Also, I tried to tweak the CSS stored in Refined GitHub extension, but it didn't work.

How do I start rendering my font style again using Refined GitHub?

Solution

  • Why it did NOT work in my case?

    Because of the double dots before the react-code-text.

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

    Working CSS with font-size

    .react-code-text, .react-code-lines, pre, code, .blob-code, .blob-code-content, .blob-code-marker, .react-blob-print-hide {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 14px;
}