Web font is blurry or wrong weight, inconsistent between pages and within a page

Question

The font (ProggyCleanSZBP.ttf from 1.1.5 release) is intermittently fat/blurry. Compare https://vonunov.nu/ with https://vonunov.nu/c/aws/free-tier/ -- the latter is mostly as desired, but you can see the problem happening in some places, like the first list element at the top of the page.

It happens in Chrome and in LibreWolf, which I think uses Goanna.

I've tried these things and they seem to cause no change at all after forcing reload with ctrl-shift-R:

1. -webkit-font-smoothing: antialiased;
2. font-weight: normal;
3. font-weight: 400;
4. Validate HTML
5. Validate CSS
6. Remove various elements to see if anything triggers it
7. Use dev console to verify that no unexpected styles are applied
8. Switch to same version of the font but without the bold punctuation
9. Remove all font-weight, font-size, line-height, letter-spacing, and text-decoration (I got the "fat text" to go away in one place by removing a <strong> within that paragraph, hence the last two changes)

Some of those recommendations are meant to work around problems with hardware acceleration, but I'm not sure if this is the problem. I disabled hardware acceleration in LibreWolf and restarted the application, but it didn't make any difference.

Questions:

1. What else should I try to tweak or validate?
2. Is this a problem inherent to using this font on the web? I'm not sure it's meant for that but I got bored of Inconsolata.
3. Is there something wrong with my eyes?

I loaded the page in another window to do a side-by-side comparison, and it seems inconsistent between those -- but the more I look at it, the more slight the difference seems to be.

Am I troubleshooting an optical illusion?

Update: This issue makes no sense at all, so I'm giving up for now. For your entertainment, my attempts to isolate the cause:

1. Isolate the element in the good page that causes the text to display properly: The text stops displaying properly when I remove the table from the page.
2. Isolate the relevant row in the table: This didn't cause the text to stop displaying properly (I removed one row at a time but didn't put them back).
3. Copy and paste one row at a time from the table into the bad page: The text displays properly after I add a certain row.
4. What is notable about that row: It contains a <strong>, which was previously seen to affect this issue (but in the opposite way). The row two rows prior to this one already contains a <strong>.
5. Remove all rows except the two rows that contain <strong>: The text no longer displays properly.
6. Remove one or the other of those rows: No change.
7. Add back the row that was between those two rows: No change.
8. Revert step 5 by adding back one row at a time: The text starts displaying properly after I add back a row that contains <th> elements.
9. Remove every row except the three rows containing <th> and <strong>: The text no longer displays properly.
10. Revert: The text displays properly after I add back a row that is unremarkable compared to other rows that did not have this effect.
11. There are now four rows whose presence has caused the text to display properly. Remove all but those four: The text no longer displays properly.

Update 2: The problem only happens when the page is too short to have a scroll bar. I guess I'll try LibreWolf's issue tracker and see if it's in scope or if they'll redirect it.

Text comparison 1

Text comparison 2

Answer 1

The problem turns out to be rather broader than initially thought, with regard to factors like whether the page has overflow. It seems that it may after all share causation with the Chrome issue of the same kind.

When various snippets from the links below are implemented in user styles, a mostly adequate workaround results:

p, pre, blockquote, ol, ul, menu, li, dl, dt, dd, a, em, strong, small, s, cite, q, dfn, abbr, code, sub, sup, i, b, span, ins, del, caption, th, td, form, label, input, button, select, datalist, optgroup, option, textarea, output, progress, meter, fieldset, legend, details, summary, dialog, slot {
  transform: perspective(1px) translateZ(0) !important;
  backface-visibility: hidden !important;
}

I still need to figure out why certain a and span are unaffected (read: paste things into user styles / read docs and tweak parameters until something works) but this at least reaches a state where entire paragraphs of text are not vaguely irritating to look at.

Chrome Font appears Blurry

Blurry text after using CSS transform: scale(); in Chrome

Also on the list of things I'm not dealing with now is generalizing this JS: https://stackoverflow.com/a/27464561/16252018