5

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.

  • 1
    Try removing code, from the line above in your CSS code. – Dan Sep 15 '17 at 8:14
  • @Dan okay, so code is the culprit, I see. I just copied them from the inspect view. I don't know what they represent. – NVZ Sep 15 '17 at 9:34
  • I don't understand what the disagreement is with the question. I would welcome any thoughts or suggestions. – NVZ Sep 15 '17 at 10:12
  • 2
    Libre Baskerville? Liar. We all know you're changing it to Comic Sans. Admit it. – user1228 Sep 15 '17 at 16:42
8

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)

  • Another minor issue: I see some things in the custom font, which I want to remain as monospaced or sans-serif. imgur.com/a/w4Zlv How can I update that? Screenshot from SO. stackoverflow.com/a/7546655/5832912 – NVZ Sep 17 '17 at 12:23
  • @NVZ that's strange, I see it as monospaced: i.stack.imgur.com/OW7OI.png Did you add the !important to the code * line? Have you got any other custom styles that might be affecting it? – Cai Sep 17 '17 at 14:12
  • I have a bunch of extensions and scripts. I'll go home and try something and will report back. Thanks. – NVZ Sep 17 '17 at 14:36
  • I had other styles in it. Cleared it up. Now it's smooth. Thanks. :) – NVZ Sep 17 '17 at 18:18
  • Glad you got it sorted – Cai Sep 17 '17 at 18:49
  • Another minor point. #wmd-input had to be changed to .wmd-input for it to work on all sites the same way, in my trials. – NVZ Sep 19 '17 at 15:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .