Force default fonts

[LonM]

Problem
We can choose our "default" fonts at Settings > Webpages > Fonts

If a webpage adds css (like this forum does):

    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;

Then we never see our "default" font if another specified one is present, as the fallback "monospace" is at the very end of the font stack.

From this given example: My "default" font for the fallback monospace is Cascadia Code, but because Consolas is in the font stack, the page is rendered using Consolas instead of my choice.

My Request
Give us an option to Force default fonts for each of the fallback families. When enabled:

Any CSS rule that contains a known fallback font reference, like the one above, would be re-written to just contain that fallback:

font-family: monospace;

This way users will actually be able to see the font they've picked, and no web designer can specify otherwise.

Why

Current methods for forcing fonts require us to add user styles via extensions or scripts, and these are bad because:

• You need extensions or scripts
• You can't easily differentiate between fallback font families - it's an all or nothing fix
• You would break icon fonts

Implementing this request would be good for a number of reasons:

• No need for an extension or to maintain a script
• If a user has set a font (e.g. for accessibility) for each fallback family, they will always see it
• This won't impact "icon" fonts, which often just have the one font being referenced in the font stack
• Having the option exist per family would give more granularity for each fallback family as to whether they want to let the designer of a website choose, or if they want to choose

Extra note:

• It would be nice if this could be implemented in such a way that unneeded fonts were not even downloaded, let alone displayed.

[greybeard]

I think this would be particularly valuable feature for those of us who are visually impaired.
@LonM: Some other very good points made here too. Great idea for (optional) feature as I know some won't like the idea.
Personally I agree with your font choices but I can see those running different OSs will have different fonts available. Also if you use something like LibreOffice you end up with some extra fonts.
I block importation of fonts (mostly for security reasons) so I do lose any icon fonts, just get little boxes to show me something is there.
I have gotten to get rather proficient at guessing what they mean.

[baris.sehri]

I upvote for this because I really believe it would be an amazing optional feature to let users decide their own typefaces on the web. it can be site-specific too... maybe... a very good suggestion.

[LonM]

Now that Vivaldi 3.0 has ad/tracker blocking built-in, blocking fonts is the only reason I have to keep uBlock Origin installed.

It would be nice to get rid of the extension altogether.

[admacro]

duplicate from me. vote++

[Pesala]

@admacro Vote for the first post if you haven't already done so. (Voting again will remove your vote).

[admacro]

@Pesala Already voted the first post.

[CarlRobert]

This is an important accessibility feature none of the Chromium -based browsers possess (Google fonts conspiracy? ). Especially important for people who don't use ClearType/similar sub-pixel smoothing. Web fonts look absolutely hideous without ClearType more times than not.

[LonM]

This is particularly annoying when I'm trying to practice reading Japanese. The fonts for languages that have very intricate characters are not great, but if I can force my font of choice then I can be sure to be able to read it.

You don't need to know what it says, but here is an example of the BBC using their own choice of font:

See the jagged edges on the first character? Compare this with when I force it to use my own choice of font:

It's so much less ragged and ugly, and is vastly easier to read, and the font size didn't need to be increased to achieve this - just a change in font. This isn't so much an issue for simple characters, but for the more complex kanji characters it really makes a difference.

Some users might argue this is the fault of chrome's poor font rendering, but when we have an easy solution available to us (default fonts) it would be stupid to not make use of it.

[svalbardsleeperdistrict]

Hi, this has been the one thing I've been missing in Vivaldi for years, so I registered for the forums to see if there was any discussion over this potential feature. Have there been any hints from devs that they are exploring the possibility of enabling this?

[barbudo2005]

@svalbardsleeperdistrict

Look this post by @kichrot :

https://forum.vivaldi.net/topic/32599/which-is-the-best-font-set-for-browsing/15

It works like a charm.

[svalbardsleeperdistrict]

@barbudo2005 Thank you for the reply. I've never used custom scripts for browsers. Where do I need to paste that script? Will it need to be done on a per-website basis for each website?

[barbudo2005]

@svalbardsleeperdistrict

1° Install the Tampermonkey extension:

https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

2° Click the icon of the extension and click Dashboard:

3° Click the "+" button:

4° Delete the new script headline:

5° Paste the script by @kichrot.

6° Replace the font " Helvetica" for the font you prefer:

7° Click the File menu and apply Save:

8° If You only want to replace the font and not the "weight_blur" and "lightens_font_color" modification as I do, use this simplified version:

// ==UserScript==
// @name          Correction of readability of text and contrast of images in Chrome
// @name:ru       Исправление удобочитаемости текста и контрастности изображений в Chrome
// @description	  Userscript to improve the readability of text and contrast of images in the browser Google Chrome and its derivatives.
// @author        kichrot
// @match         *://*/*
// @include       *://*/*
// @run-at        document-start
// @grant         unsafeWindow
// @compatible    chrome
// @version       0.4.1
// ==/UserScript==

var weight = 0; /* The variable changes the weight of the font/Переменная изменяет толщину шрифта */
var weight_blur = 0.6; /* The variable changes the weight and blurs the borders of the font/Переменная изменяет толщину и размывает границы шрифта */
var lightens_font_color = 0.2; /* Variable lightens the color of the font/Переменная осветляет цвет шрифта*/
var font = 'Lato'; /* Variable assigns the font/Переменная назначает шрифт */
/* Verdana | Arial | Helvetica | HelveticaNeueCyr | Tahoma |Lato| Noto Sans | Open Sans | Manrope | Roboto | Montserrat */
var unit = 'px'; /* The variable assigns the unit of measure/Переменная присваивает единицу измерения */
/* px | em | ex | rem | vh | vw */

(function () {
    'use strict';
    var css = document.createElement('style');
    css.innerHTML += [`*{`,
                      `-webkit-text-fill-color:currentColor  !important;`,
                      //`-webkit-text-fill-color:transparent  !important;`,
                      
                      `-webkit-font-smoothing: subpixel-antialiased /*antialiased*/ !important;`,
                      `text-rendering: geometricPrecision !important;`,
    `}`,
    `*:not([class*=\"icon\"]):not([class*=\"ico\"]):not([class*=\"button\"]):not([class*=mjx]):not([class*=vjs]):not([class*=fa]):not([class*=ms-Button-icon]):not([class*=DPvwYc]):not([class*=bb]):not([class*=icon]):not([class*=ll]):not(i):not([role*=button]) {`,
                      `font-family: ${font} ;`,
    `}`,
    `img {`,
                      `image-rendering: -webkit-optimize-contrast !important;`,
    `}`
    ].join("\n");
    document.documentElement.appendChild(css);
}) ();

[barbudo2005]

@svalbardsleeperdistrict

It is for all sites not "per-website basis"

[svalbardsleeperdistrict]

@barbudo2005 Many thanks! It works like a charm.

[barbudo2005]

@svalbardsleeperdistrict

About "per-website basis":

In the window of Tampermonkey press the ">" button:

Select "Exclude ……..":

[svalbardsleeperdistrict]

@barbudo2005 Thank you.

[svalbardsleeperdistrict]

@barbudo2005 I have a question. On opening new websites, or reloading ones I have open, sometimes the font setting overrides the default ones, but sometimes not. Sometimes I need to do several reloads for the override to take place. Can this be related to some extension I have installed?

[barbudo2005]

@svalbardsleeperdistrict

Look the setting in Tampermonkey extension:

I have to study why It reverts to:

[svalbardsleeperdistrict]

@barbudo2005 Thank you for the help!