How to change all fonts on Stack Exchange sites?

Question

I'm not asking SE to change its fonts. I think people are misreading my post. I just want help on changing fonts on my own PC because I always customise things I use a lot; my car, my phones, my PC and stuff. So this is tagged support, not feature request. :)

---

I'm not a techie, and I don't know anything significant about coding or editing CSS. But after some googling and tinkering with CSS with the help of Stylish, a Chrome extension, I managed to change fonts to a certain extent.

But there are some things I'd like help on:

• I want the fonts of all elements except the monospaced text to change to what I pick, a font1.
• I want to change the text editor font to a font2.

Currently, I copypasted some stuff from Chrome's "inspect" view into the Stylish editor; and by trial and error, managed to get to this, even though I have no clear idea what each of the items represent:

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&subset=latin-ext');

html, body, div, span, applet, object, iframe, h, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, comment, a, question, .question-header, .question-hyperlink, .answer-hyperlink {
    font-family: 'Libre Baskerville',sans-serif;
}

But I don't think it works well because, on some sites, I see a different font for comments, or sidebars or for questions, etc. I want to see monospaced as monospaced itself. I want to improve this.

---

See screenshots in my recent questions: 1, 2. Or a screenshot of this very question.

Answer 1

As far as I know, all monospaced text is in <code> tags. You can use the :not() pseudo class to target everything except the code tags...

:not(code) {
    font-family: 'Libre Baskerville', sans-serif !important;
}

This falls down when code is highlighted though. I can't think of an easy way to exclude highlighted code whilst still targeting everything else on the page without getting really specific with what we're targeting.

We can re-set the highlighted code to another monospaced font easily enough though, which is better than nothing...

code * {
    font-family: 'My Codez Font`, monospace !important;
}

You can select the post editor with its ID...

#wmd-input {
    font-family: 'Another Font', sans-serif !important;
}

Note, I've also added !important to the end of each declaration. That should override any more specific styles that weren't otherwise affected.

So the whole thing looks like:

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&subset=latin-ext');

:not(code) {
    font-family: 'Libre Baskerville', sans-serif !important;
}
code * {
    font-family: 'My Codez Font', monospace !important;
}
#wmd-input {
    font-family: 'Another Font', sans-serif !important;
}

(Swap the font names for something real of course)