54

Recently, Stack Exchange decided to switch to system fonts. For those of you who prefered the old appearance, or would like a different font to appear in code blocks or across the site as a whole, Custom Fonts is a user script I wrote this morning to allow just that.

Features

Custom Fonts allows rules to be set for different sites, which can specify a sans serif, serif, and monospace font. A default can also be specified, allowing you to choose between sans serif and serif for any site.

Custom Fonts initially doesn't change anything (unless you download one with a preset), but on lines 26 and 27 are rules that revert all of Stack Exchange to its original fonts (once un-commented). Custom rules can be written, and there is a short reference in the comments under the Rules object.

Download

Custom Fonts is a user script, meaning that it requires Greasemonkey (Firefox or browsers that support Firefox extensions) or Tampermonkey (Chrome or browsers that support Chrome extensions) to be installed.

Custom Fonts 1.2.4

Custom Fonts 1.2.4, with original fonts

Custom Fonts 1.2.4, with Roboto + Roboto Mono

Glorfindel
  • 6,772
  • 3
  • 20
  • 46
Radvylf Programs
  • 571
  • 3
  • 8
  • 5
    Usually, I think these things go a.) on StackApps, and perhaps b.) get linked in an answer to the announcement post. I've never seen them get their own question before, hence me asking before unilaterally moderating it...Sure, more people will find it here, but like Mast said that's not a reason to be off-topic :P I don't post my IPS questions on SO just because there's more people checking SO! – Tinkeringbell May 10 '21 at 17:15
  • 10
    Thank you very much. I'm thinking about writing a post for a request for this to be in our preferences, because I much preferred the old fonts. This looks... weird. – Ollie May 10 '21 at 17:09
  • 4
    Thank you soooo much! This helps my eyes - I just can't read the light font the new update provided. – Rory Alsop May 10 '21 at 17:18
  • 2
    Can you split this in a question and an self-answer? People get confused that it is all in one. – rene May 10 '21 at 17:20
  • 2
    @Tinkeringbell - I honestly think this should go in the main announcement so that people can more easily revert this awful font. – Valorum May 10 '21 at 17:20
  • @rene Not sure about that, seems like it'd be more confusing to do it that way IMO – Radvylf Programs May 10 '21 at 17:21
  • @RedwolfPrograms You're genius! Finally I can have the nice serif font back which was tragically lost in the Great Undesign of 2018, in which a lot of sites lost their custom design! – samcarter_waiting_for_siparty May 10 '21 at 17:46
  • 1
    I made a lightweight version with 3 lines. – Spectric May 10 '21 at 19:08
  • 1
    @Spectric There's a reason it's longer than that. There are lots of things that skips. – Radvylf Programs May 10 '21 at 19:08
  • For the record, any solutions written in JS tend to be somewhat slow and have a startup delay. This is absolute overkill compared to using a userstyle (which also loads substantially faster) – Zoe is on strike May 11 '21 at 08:33
  • @Zoe I would recommend using a userstyle over this if you have the option, though this script is designed to (ideally) load the new CSS almost instantly (uses @run-at document-start) so there shouldn't be a visible delay very often. A lot more people have userscript managers installed than userstyle ones, so I figured this would be useful to share, at least as a temporary solution. – Radvylf Programs May 11 '21 at 12:45
  • Hi! Version 1.2.2 doesn't work in GreaseMonkey in FF because of @match https://stackexchange.com. This line wasn't there in 1.2.1, which does work fine. – HolyBlackCat May 17 '21 at 17:11
  • 1
    @HolyBlackCat Will fix. I also need to add @excludes for chat and the API – Radvylf Programs May 17 '21 at 17:39
  • 1
    @HolyBlackCat Fixed – Radvylf Programs May 17 '21 at 17:46
  • When running at document-start the <head> and <body> elements will commonly not yet exist. The element which is guaranteed to exist and to which you can .appendChild is the document.documentElement. However, given that using document.documentElement.appendChild at that time will result in your <style> being before the <head> in the document, you will need to make sure that the CSS rules have a higher specificity than the ones you're wanting to replace, because they will be before, not after, any rules in CSS provided by the page. (continued) – Makyen May 18 '21 at 00:10
  • You can easily increase the specificity by just prefixing each selector with a body or html. For those two elements, body and html, you can add a :not(.withSomeMadeUpClassWhichWillNeverExistInTheDocumentOnThatElement). Using the document.documentElement is significantly superior to waiting for the DOMContentLoaded event. If you wait for DOMContentLoaded, which is going to be the case most of the time, depending on userscript manager, browser, and OS, the user will experience a flash of the incorrectly formatted content. – Makyen May 18 '21 at 00:10
  • Note that you can get more complex and use a MutationObserver to wait for the <head> and/or <body> to be created, but that approach really isn't justified for something like this (and didn't work in the older versions of Edge). – Makyen May 18 '21 at 00:13
  • hello; Personally, I have set myself the task of creating an extension and I have managed to customize some aspects of the site, one of them is the color of the links and the font, Here are two examples: Main Web and code with fira code fonts and ligatures –  Aug 02 '22 at 20:13

0 Answers0