Force default fonts

LonM

I found out that Firefox has this as an option. would be nice for vivaldi to get it too:

svalbardsleeperdistrict

@lonm Yeah, that was the only reason I was still using Firefox as my main browser while having Vivaldi as secondary. I like Firefox too, but Vivaldi customisation, tab navigation and other stuff just works better for me. It would be great if we had the ability to override fonts without having to use custom scripts (and the script I was helpfully given is still not consistent for me - I often need to refresh pages several times before it starts to override website font selection).

barbudo2005

@svalbardsleeperdistrict

Do this:

1° Install the extension Stylus:

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

2° Click the icon of Stylus and select "Manage":

3° To the left click on "Write new style":

4° Name it "Force font":

5° To the right paste this code and replace the font name you prefer:

*
{font-family: Lato !important;}

6° Save the style:

7° Uninstall the extension Tampermonkey.

svalbardsleeperdistrict

@barbudo2005 Thank you, I did it and the font override is now working straight away.

barbudo2005

This post is deleted!

barbudo2005

@svalbardsleeperdistrict

An improvement. Replace the code for this:

*:not([class*="ico"]):not([class*="icon"]):not([class*="icons"]):not([class*="fa"]):not([class*="control"]):not([class*="button"]):not([role*="button"]):not([id*="button"]):not([class*="btn"]):not(button):not(i):not(a):not(span)

{font-family: Lato  !important;}

In such a way that the icons and buttons keep their shape.

This:

Not this:

LonM

I have recently learned that the "blocking remote fonts" capability will not be available after uBlockOrigin dies from MV3. This is the extension I was using to try and get close to this functionality.

barbudo2005

@LonM

Said:

I have recently learned that the "blocking remote fonts" capability will not be available after uBlockOrigin dies from MV3.

But in the end, this code will accomplish the same thing:

*:not([class*="ico"], [class*="fa"], [class*="control"] *, [class*="button"], [role*="button"],[type*=button], button, [id*="button"], [class*="btn"], [class*="mjx"], [class*="vjs"],
[class*="bb"], [class="ll"], i, [class="i"], [class*="symbol"],  img, svg)



{font-family: Lato  !important;}

Understanding that they are going to be downloaded anyway.

barbudo2005

For those who want to use the code and do not want to install the Stylus extension this is the code to use. Thanks to @luetage for posting it in boilerplate form.

// ==UserScript==
// @name Force default font
// @namespace
// @updateURL
// @description
// @version
// @author
// @match  *://*/*
// @exclude
// @run-at      document-start
// ==/UserScript==

(function () {
  "use strict";
  const css = `

  	*:not([class*="ico"], [class*="fa"], [class*="control"] *, [class*="button"], [role*="button"],[type*=button], button, [id*="button"], [class*="btn"], [class*="mjx"], [class*="vjs"],
[class*="bb"], [class="ll"], i, [class="i"], [class*="symbol"],  img, svg)



{font-family: Lato  !important;}


  `;
  function _async() {
    return new Promise((resolve) => {
      requestAnimationFrame(resolve);
    });
  }
  async function _wait() {
    while (!document.body) {
      await _async();
    }
    return true;
  }
  function inject() {
    _wait().then(() => {
      const style = document.createElement("style");
      style.id = "usrjs-A-NAME";
      style.innerHTML = css;
      document.getElementsByTagName("head")[0].appendChild(style);
    });
  }
  inject();
})();

Change the font-family of your taste.

Paste it in a text editor and save it with this name in a safe place without deleting it.

Force default font.user.js

Open the extension page with Developer on and drag it.

LonM

@barbudo2005 Thank you for working on this.

This is a good start but it misses something key. Sometimes sites have a reason for changing the font to a different style through families. E.g. using the cursive font to add emphasis, or the monospace font to highlight a term. And though theoretically they ought to use <em> or <code> to do this, not all do. It's impossible to imagine in advance all the exceptions that are needed to override fonts in this fashion. This forum, for example, uses <code> with spans inside it for long code blocks, and that gets broken. Sites with iframes don't get fixed.

There's a reason that customisable fonts are part of the web spec: Accessibility. I was reading The web accessibility standard and Guideline 1.4 is easy configuration across font families.

An earlier version of this document worded this as "[user choices] overriding any specified by the author or user agent defaults".

We are doing something hacky with userscripts, these are not true user styles. The current spec has this to say: "For platforms without user stylesheets, text configuration needs to be provided to users through the user agent's main user interface or via an add-on". Seeing as the add-on I was using is going away, getting proper support for this is important. We, including less technically minded users, should not have to jump through such hoops to achieve what is mandated by the standard.

barbudo2005

@LonM

Said:

We are doing something hacky with userscripts...

Doing the best we can, achieving second best option.

First best:

Something can be done through the following selectors:

/*TITLES*/

h1, h2, h3

{font-family: Times New Roman !important;}

/* HIGHLIGHT*/

u, strong

/*BOLDED TEXT*/

b, i

These lists should be checked for "blocking remote fonts":

1.-

https://github.com/yokoffing/filterlists/blob/main/block_third_party_fonts.txt

[Adblock Plus 2.0]
Title: Block third party fonts
Description: Block most third-party fonts.
Allows for Material Icons and WOFF fonts in order to not break sites.
Homepage: https://github.com/yokoffing/filterlists
Expires: 4 days (update frequency)
Version: 12 August 2024
Syntax: AdBlock

2.-

https://filterlists.com/

luetage

@LonM I do understand the accessibility aspect. It makes sense for readers with special needs to be able to switch out fonts. I do not understand your general desire for blocking remote fonts. Good typography demands not only choosing an appropriate font, but also setting fitting line height and width, font weight, and font size. You will get mixed to terrible results forcing your own fonts over an already established layout. It’s the better idea to run reader mode instead, which enables you to fine tune it and will give a reliable outcome.

Over the past few years variable fonts are getting more common. This greatly reduces the file sizes and is a good option for web fonts. Yet another reason not to insist on your own fonts.

Web fonts won’t go away and that’s a good thing. Many websites load wonderful proprietary fonts, which are a joy to read.