Change font throughout Vivaldi (Windows)

[stardepp]

If you want to change your font system wide in Vivaldi you can do so:

/* ================================================================================================== */
/*  Change Font to Comic Sans */
#browser.win,
#browser.win + div,
#browser.win + div + div,
#browser.win button,
#browser.win input,
#browser.win select,
#browser.win textarea {
  font-family: "Comic Sans MS";
}
#browser.win:lang(ar),
#browser.win + div:lang(ar),
#browser.win + div + div:lang(ar),
#browser.win button:lang(ar),
#browser.win input:lang(ar),
#browser.win select:lang(ar),
#browser.win textarea:lang(ar),
#browser.win:lang(ku),
#browser.win + div:lang(ku),
#browser.win + div + div:lang(ku),
#browser.win button:lang(ku),
#browser.win input:lang(ku),
#browser.win select:lang(ku),
#browser.win textarea:lang(ku),
#browser.win:lang(fa),
#browser.win + div:lang(fa),
#browser.win + div + div:lang(fa),
#browser.win button:lang(fa),
#browser.win input:lang(fa),
#browser.win select:lang(fa),
#browser.win textarea:lang(fa) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(ja),
#browser.win + div:lang(ja),
#browser.win + div + div:lang(ja),
#browser.win button:lang(ja),
#browser.win input:lang(ja),
#browser.win select:lang(ja),
#browser.win textarea:lang(ja) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(zh-CN),
#browser.win + div:lang(zh-CN),
#browser.win + div + div:lang(zh-CN),
#browser.win button:lang(zh-CN),
#browser.win input:lang(zh-CN),
#browser.win select:lang(zh-CN),
#browser.win textarea:lang(zh-CN) {
  font-family: "Comic Sans MS";
}
#browser.win:lang(zh-TW),
#browser.win + div:lang(zh-TW),
#browser.win + div + div:lang(zh-TW),
#browser.win button:lang(zh-TW),
#browser.win input:lang(zh-TW),
#browser.win select:lang(zh-TW),
#browser.win textarea:lang(zh-TW) {
  font-family: "Comic Sans MS";
}

You copy this code and create a new text file in Windows Explorer. You copy this code into it and save this text document. And you name this text file

FontComicSans.css

Then you type in Vivaldi's address line

vivaldi://experiments

There you activate this function:

You restart Vivaldi afterwards and go to the settings

vivaldi://settings/appearance/

There you will find a new menu item, here enter the folder in which the file

FontComicSans.css

This way the font change is preserved even after a Vivaldi update, as long as you leave this file in the same folder.

Of course you can also use this for other fonts, then replace Comic Sans MS with your desired font.

• @nomadic had created this .css for me *

[stardepp]

The font is also changed in the settings and in the context menu, here two examples:

[Pesala]

@stardepp said in Change font throughout Vivaldi (Windows):

Then you type in Vivaldi's address line
vivaldi://experiments

There you activate this function:

This step is no longer required. Custom UI Modifications are enabled by default in Vivaldi Stable 3.3 or later. One can also see the experiment features in the Biscuit Area of the Settings dialog. Enter the "dog face" emoji to enable it.

[A Former User]

@Pesala said in Change font throughout Vivaldi (Windows):

This step is no longer required. Custom UI Modifications are enabled by default in Vivaldi Stable 3.3 or later.

I've tried now with a clean --user-data-dir on my 3.4 & it's still disabled (by default).

One can also see the experiment features in the Biscuit Area of the Settings dialog. Enter the "dog face" emoji to enable it.

These are two different experiments... one is chrome://flags for Vivaldi's features & the other is almost purely for testing.

[Veldrin]

My windows 10 system fonts are all IBM Plex Serif and also a chrome extension forces IBM Plex Serif. With your css script now everything uses the IBM Plex Serif. But of all websites I ever visited only google chrome extensions store forces some of their fonts. But that's just a minor inconvenience, since youtube and google search engine itself are working like intended with my fonts. Thanks!

[smileytiger28]

@stardepp said:

The font is also changed in the settings and in the context menu, here two examples:

My settings have changed but not my context menu, can anyone help me figure out why that is?

[DoctorG]

@smileytiger28 Context menu is created by OS and can not be changed in Vivaldi.

[smileytiger28]

@DoctorG How did OP change it then?

[abbiegonzalez]

I wonder if this has been disabled?
It doesn't seem to pick up the CSS I've dropped, but there are options in ://flags that indicate the UI will override to the system font?

[stardepp]

If you want to change your font system-wide in Vivaldi, this short .css code also works:

/* Font for Vivaldi UI */
* {
  font-family: "Comic Sans MS" !important;
  text-shadow: 0 0 .8px var(--colorFgAlpha) !important;
  letter-spacing: .1px;
}

.button-startpage button .button-title,
.startpage .startpage-navigation .startpage-navigation-group .button-startpage {
  font-family: "Comic Sans MS" !important;
}

[Veldrin]

@smileytiger28

I changed OS fonts with Winaero Tweaker.