Google Chrome extensions to allow changing font of selected text

Question

I have been searching for a minor inconvenience experienced while reading some programming blogs that post the source code within the articles in the same font as the regular text. The only exception to this problem is when the whole article is using a monospaced font.

Clipped screenshot of one such programming blog article:

I found some relief by viewing the article via Google's web cache in text only mode and it shows the article in a monospaced font, as I already have the browser's default font set to a monospaced font.

What I would actually prefer is the ability to select the source code from the web article and change the font through an extension, just like in a word processor program.

By using Google Chrome's Inspect element, I change:

<span class="code">
    <p>&nbsp;&nbsp;&nbsp; try<br minmax_bound="true">&nbsp;&nbsp;&nbsp; ...</p>
</span>

to:

<span class="code" style="font-family:monospaced;">
    <p>&nbsp;&nbsp;&nbsp; try<br minmax_bound="true">&nbsp;&nbsp;&nbsp; ...</p>
</span>

if it is a huge section of code. But repeating the above is a bit of stretch if there are multiple snippets of code in the article, and I find it not viable. I tried a lot looking for Chrome browser extensions that would let the user select some text and change its font, with no luck.

Are you aware of such an extension or an alternate/easier solution? Thanks in advance.

P.S. I do not know much about developing browser extensions for Chrome, and also whether the browser exposes such a functionality. In my free time I would like to explore that route too. It can become a nice opportunity for getting myself introduced to programming extensions. Meanwhile, any new ideas/thoughts from the community will be greatly appreciated.

Edit #1: I am looking for a solution that can allow the font to be changed without having to reload the page. As there might be cases where the content can change after a page-refresh. Viewing source code in programming blogs is just a scenario that I encounter most often. For example, a web article might contain some ASCII art design, but the original author presented in the article's main variable-width font. I know that, I could just simply copy the ASCII art part (or even the source code in a programming blog) and view it in a notepad. I am beginning to wonder if I am just worrying too much about a trivial requirement.

Answer 1

Why don't you just use Google's Custom.css, it's in the "default" folder > User Stylesheets > Custom.css.

Google's custom.css file will override any css on a webpage, and it allows you to specify anything you can with CSS.

Answer 2

Based on MarcusJ's suggestion in a comment in response, I tried the Stylish extension for Chrome. It did the job. It required me to manually type the CSS code and assign a URL match pattern. But, I found the extension Stylebot more convenient to use. Stylebot provides an easy to use interface to select the HTML element and for making style changes. Stylebot applies the style rule to all pages in that subdomain. I liked the fact that Stylebot does the job behind the scenes for you.