• Community
    • Community
    • Vivaldi Social
    • Blogs
  • Forum
    • Vivaldi Forum
    • Categories
    • Recent
    • Popular
  • Themes
    • Vivaldi Themes
    • My Themes
    • FAQ
  • Contribute
    • Contribute
    • Volunteer
    • Donate
  • Browser
    • Vivaldi Browser
    • Latest News
    • Snapshots
    • Help
Register Login

Vivaldi

  • Community
  • Themes
  • Contribute
  • Browser

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. Desktop
    3. Desktop Feature Requests
    4. Force default fonts

    Force default fonts

    Scheduled Pinned Locked Moved Desktop Feature Requests
    fontsaccessibility
    34 Posts 11 Posters 6.2k Views 7 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • svalbardsleeperdistrict
      S
      svalbardsleeperdistrict @barbudo2005
      last edited by

      @barbudo2005 Thank you.

      1 Reply Last reply Reply Quote 0
    • svalbardsleeperdistrict
      S
      svalbardsleeperdistrict @barbudo2005
      last edited by

      @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?

      1 Reply Last reply Reply Quote 0
    • barbudo2005
      B
      barbudo2005
      last edited by

      @svalbardsleeperdistrict

      Look the setting in Tampermonkey extension:

      18cc27f8-16ef-4c8e-b142-585351aa92cc-image.png

      I have to study why It reverts to:

      6f11b065-cafd-438b-9706-94a07ed0e6df-image.png

      svalbardsleeperdistrict
      S
      1 Reply Last reply
      Reply Quote 1
    • svalbardsleeperdistrict
      S
      svalbardsleeperdistrict @barbudo2005
      last edited by

      @barbudo2005 Thank you for the help!

      1 Reply Last reply Reply Quote 0
    • LonM
      L
      LonM Soprano Patron Moderator
      last edited by

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

      b21d9bd0-1b9f-4f75-9b8a-e70b9ebcac3f-image.png

      💻 Windows 10 64-bit Sopranos Builds • en-GB • 🗳 vote for features • 🕵️‍♀️ Code of Conduct • 🐞 Report bugs

      svalbardsleeperdistrict
      S
      1 Reply Last reply
      Reply Quote 4
    • svalbardsleeperdistrict
      S
      svalbardsleeperdistrict @LonM
      last edited by 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
      B
      1 Reply Last reply
      Reply Quote 1
    • barbudo2005
      B
      barbudo2005 @svalbardsleeperdistrict
      last edited by

      @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":

      9d029557-b2ec-44f2-9ece-2ad996a3c4c3-image.png

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

      4965babd-ed9b-4e10-8fa3-458026c5fd66-image.png

      4° Name it "Force font":

      bacfa32e-dc0b-4efd-9e45-cc07123cd978-image.png

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

      *
      {font-family: Lato !important;}
      

      6° Save the style:

      fb78fb81-c21c-4cfe-965c-765a5c40af0c-image.png

      7° Uninstall the extension Tampermonkey.

      svalbardsleeperdistrict
      S
      1 Reply Last reply
      Reply Quote 2
    • svalbardsleeperdistrict
      S
      svalbardsleeperdistrict @barbudo2005
      last edited by

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

      barbudo2005
      B
      2 Replies Last reply
      Reply Quote 1
    • barbudo2005
      B
      barbudo2005 @svalbardsleeperdistrict
      last edited by barbudo2005

      This post is deleted!
      1 Reply Last reply Reply Quote 0
    • barbudo2005
      B
      barbudo2005 @svalbardsleeperdistrict
      last edited by

      @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:

      64f24a6c-a9f4-4898-a06a-129520c6479b-image.png

      Not this:

      21c8e159-dd76-4008-a693-dd94d229e926-image.png

      1 Reply Last reply Reply Quote 2
    • LonM
      L
      LonM Soprano Patron Moderator
      last edited by

      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.

      💻 Windows 10 64-bit Sopranos Builds • en-GB • 🗳 vote for features • 🕵️‍♀️ Code of Conduct • 🐞 Report bugs

      barbudo2005
      B
      1 Reply Last reply
      Reply Quote 0
    • barbudo2005
      B
      barbudo2005 @LonM
      last edited by

      @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.

      1 Reply Last reply Reply Quote 0
    • barbudo2005
      B
      barbudo2005
      last edited by

      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.

      37d95780-c8ae-47f0-897e-015337014978-image.png

      9591688d-1ead-4bb5-8dd8-c47d1384650f-image.png

      LonM
      L
      1 Reply Last reply
      Reply Quote 0
    • LonM
      L
      LonM Soprano Patron Moderator @barbudo2005
      last edited by 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.

      💻 Windows 10 64-bit Sopranos Builds • en-GB • 🗳 vote for features • 🕵️‍♀️ Code of Conduct • 🐞 Report bugs

      barbudo2005
      B
      luetage
      L
      2 Replies Last reply
      Reply Quote 1
    • barbudo2005
      B
      barbudo2005 @LonM
      last edited by

      @LonM

      Said:

      We are doing something hacky with userscripts...

      Doing the best we can, achieving second best option.

      First best:

      73924a58-bb21-4938-8956-8b9c6cd0e8e1-image.png

      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/

      8ed8fc36-65cf-4f70-9065-1bca596d7806-image.png

      1 Reply Last reply Reply Quote 1
    • luetage
      L
      luetage Supporters Soprano @LonM
      last edited by 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.

      github ◊ vfm

      1 Reply Last reply Reply Quote 0
    • Z
      zava8
      last edited by

      in vivαldi browser neither the interface nor ԃhe webpages appears/renders in fonts set usińg settińgs.
      in firefox settińgs for custom fonts αre for αll lańguages.
      kindly provide options for indiα ińglish fonts. ing115.ttf/woff2 hindi115.ttf etc... alt text

      Pesala
      P
      1 Reply Last reply
      Reply Quote 0
    • Pesala
      P
      Pesala Ambassador @zava8
      last edited by

      @zava8 You can upload images to the forum to make sure that they display.

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

      Vote for Feature Request.png

      Welcome to the Community. Here are a few links for your bookmarks that you may find useful:

      • Help on Feature Requests • Add Search as Web Panel
      • Vivaldi Help
      • Forum Markdown Help
      • Using the Forum Search
      • Local Forums in your language
      • Vivaldi Themes
      • Modding Vivaldi
      • Web Panels
      • Vivaldi for Android
      • Snapshot vs Stable
      • Vivaldi's Business Model
      • Vivaldi User Groups
      • Help us grow

      Blog • Vivaldi Review • Server Status
      Win 10 64-bit build 19045.2486 • Snapshot 7.5.3725.3 (64-bit)

      1 Reply Last reply Reply Quote 0
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    • 1
    • 2
    • 2 / 2
    • First post
      Last post

    Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status