Hey, how can I get Discourse to do X?

Daagar · November 16, 2021, 4:31pm

I don’t think I ever posted this here. As I am bad at keeping track of it myself, adding this here as my backup solution.

The following tampermonkey script will give the site a wonderful font for reading. You could change it to another font too, I suppose, but I mean… why?

// ==UserScript==
// @name         QT3 Fonts
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  solid font for old man eyes
// @author       daagar
// @match        https://forum.quartertothree.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    // See https://fonts.google.com for all the fonts you can put here!
    link.href = 'fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap'
    document.getElementsByTagName("head")[0].appendChild(link);

GM_addStyle('html { FONT-FAMILY: Roboto; !important;font-weight: 500 !important;.list-controls .category-dropdown-menu a.badge-category,.list-controls .category-dropdown-menu .dropdown-header { font-family: Roboto !important; }    .badge-wrapper { font-family: Roboto !important;} aside.onebox .onebox-body h3, aside.onebox .onebox-body h4, .category-list tbody .category h3, .names span.first { font-weight: normal !important;} }');
})();

EDIT: Actual working version (or at least what I consider working) thanks to @fox.ferro CSS skillz.

ArmandoPenblade · November 16, 2021, 4:34pm

Roboto is SO good

abidingdude · November 18, 2021, 5:22pm

I couldn’t get this to work :( It just defaults to the system font, not roboto.

Daagar · November 18, 2021, 5:50pm

Well that’s annoying - it really is supposed to be cut&paste easy. When you are on QT3, do you get the red notification icon to show that a script is ‘active’ in Tampermonkey?

abidingdude · November 18, 2021, 5:55pm

Yeah I get that notification icon. The script is working - it’s just not giving me the font I want, not sure why. I don’t know enough about Tampermonkey to debug it alas.

Daagar · November 18, 2021, 7:28pm

I run this in Firefox - I wonder if Tampermonkey in other browsers does things differently. It shouldn’t, and I’m pretty sure I use this in Vivaldi as well without issue. Will try to think up other suggestions.

Calelari · November 18, 2021, 10:28pm

It works for me if I install the fonts on my system rather than relying on the script/browser to fetch them from Google’s cdn.

I haven’t been able to figure out why. My webdevfu is like a decade out of date.

Daagar · November 18, 2021, 10:42pm

Ohhh, I would have never thought of that! I do have that font local as well, so hoping that fixes it for anyone else trying to make it work.

fox.ferro · November 21, 2021, 9:02pm

The google font api doesn’t contain a definition for ‘Roboto Medium’.

html { FONT-FAMILY: Roboto Medium; !important; ...

Should be;

html { font-family: Roboto !important; ...

(It also needed a minor colectomy. Trust me, I’m a doctor. Somewhere. AND WHY ARE WE SHOUTING ABOUT FONTS P.S. FIRA SANS ROOLZ)

abidingdude · November 21, 2021, 9:07pm

That did the trick for me, thanks!

Daagar · November 21, 2021, 11:22pm

Thanks for the fix - no idea why it always worked for me as-is. Post updated.

EDIT: Hah - so this works, but it of course puts the font back to plain ol’ Roboto… still better, of course!

fox.ferro · November 22, 2021, 9:42am

It’s the standard problem with ‘custom fonts’ on the web; If you’ve got Roboto Medium installed on your PC as a ‘proper’ font your browser will make use of it, if not it’ll work its way through whatever rules govern its choice of defaults to eventually end up at something it can display. Typically Times New Roman.

Of course, Roboto is not Roboto Medium so all we may need is a proper fallback rule here since it doesn’t know any better. So we can change the root rule to;

html { font-family: 'Roboto Medium', Roboto !important; ...

But that sucks for people without Roboto Medium and I’m sure we can do better. I’m not much of a Roboto connoisseur* but perhaps merely loading in the more weighted version google offers is all you want here. 400 is the default but it sounds like you enjoy it a bit thicker** at 500. Fortunately we can do that fairly easily via changing the font link to;

//fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap

Then you need to set the font-weight in your root css rule.

html { font-family: Roboto !important; font-weight: 500 !important; ...

That may approximate whatever ‘Roboto Medium’ looks like, though you can of course go through everything google offers here and see what looks best @ Google Fonts.

* Because I’m a fox of wealth and taste and, as stated, Fira Sans.
** (⊙＿⊙’)

Daagar · November 22, 2021, 5:59pm

Appreciate your CSS skills here - that does indeed work as stated on the tin (original post updated as well). I even tried out Fira Sans*, as apparently we now know the answer to the age old question of ‘what does the fox say’.

Also, CSS is dumb.

Alas, won’t be keeping. I could see it being nicer on a 1440+ res screen.

Alistair · December 3, 2021, 10:47pm

These days when I click on the category dropdown within a forum, like Hardware and Technical Stuff, the category menu shows up as searchable, with a dropdown of previous search terms already open, which obscures the actual category list. Just me?

It only stays open with mouseover, but still :)