Customize Vivaldi to use System Font in Browser UI

[vbasky]

I would like to know if I can customise the browser to use the system font in its UI for File, Edit and URL fields such as Helvetica Neue or San Francisco on a mac. I am not sure what font Vivaldi uses by default and I don't prefer that. I want the legibility of font similar to browsers like Safari, Chrome, Opera etc Vivaldi alone looks weird.

[vbasky]

Seriously this forum doesn't even respond ??

[luetage]

Font declaration in Vivaldi:

#browser.mac, #browser.mac + div, #browser.mac + div + div, #browser.mac button, #browser.mac input, #browser.mac select, #browser.mac textarea {
    font-family: 'SF', '.SFNSDisplay', HelveticaNeue, LucidaGrande, system-ui, sans-serif;
}

[vbasky]

Where would I have to set this ?

[luetage]

@vbasky You don't need to change it, it's already set. I was just showing you what Vivaldi uses in common.css.

[GenXstarX]

Here mate this will be moire helpful than the useless comments of previous posters:

Right click Vivaldi Application 'Show Package Contents"

Navigate the following:

note: '2.4.1488.38' this varies dependant on version.

/Applications/Vivaldi.app/Contents/Versions/2.4.1488.38/Vivaldi Framework.framework/Versions/A/Resources/vivaldi/style/common.css

or Command + Shift + G paste in

/Applications/Vivaldi.app/Contents/Versions/

Then travel from there until you get inside the 'style' folder and see 'common.css'

Open the common.css file in Text Edit or BBEdit is nicer

search for '@font-face' and change all the values under each
then for each section '#browser.mac' change the font to your preference.

see my image attachment

I suggest after editing this file and it's set exactly they way you want, make a copy to another location because any Vivaldi update will replace it, just copy (replace) your edited file back to into location of upgraded version...I just create a folder with the the path as folder name so I remember the location.

Hope this is more helpful than the vague useless BS the other guys posted....My gosh people are unable to respond and think with consideration how another person is supposed to interpret and use information given 'Font declaration in Vivaldi:' useless!!!

[luetage]

@GenXstarX There aren't numerous other people who posted, there is just me. So please consider stopping the attack on an imaginary crowd.

As for your advice, it's dangerous. We don't edit common.css for a reason. The file is replaced when a new version is installed, that much is true – but it's also being updated… Following your directions would mean copying an old version of the file into a new install – and breaking stuff.

Instead we create a custom.css file and load it with help of browser.html. The whole process can be automated. Take a look at the pinned topics in the modifications subforum.

Anyway, the OP asked if there is a way to use system font, but on macOS Vivaldi already uses system font for the UI. Therefore there is no need to change anything.

[vbasky]

@GenXstarX Thanks for the detailed step by step sequence to change the font, this did help to change it from SFCompactDisplay to SFUIDisplay. I don't know what tempted Vivaldi to use the compact font. It appears so squished and un-natural for the browser look and feel. Please switch it back to use SFUI as the default in the codebase as opposed to SFCompact so that an update doesn't break Vivaldi developers @luetage please help to bring this to developer and product team attention .

[xyzzy]

@vbasky FYI, your bug for this issue is still open and it has been brought to the attention of one of the designers that works on Vivaldi's UI. Unfortunately, I don't know when they'll resolve it.

[GenXstarX]

@luetage

Stop being hyper sensitive and over reactive. Look, in your view of the world everything is 'dangerous' and you should be wrapped on cotton wool to protect yourself.

Modifying a css in a browser dangerous, wow, LOL. You know I got macOS machines I run as root user for several years, even servers, you'd consider that the epitome of 'dangerous' in computing terms right? OK fine for you, but i've not had any issues running as root, quite frankly since about Mt Lion macOS has gotten annoying with all the additional baby sitting security stupidity. Running root give me back full control of the system like classic MacOS. I know this completely off topic but the point is, let each user quantify the level of risk themselves and let them make their own determinations eh

Thankfully the OP explained the situation, and we now understand the reason he was asking is because the system font was NOT being used, due to a bug, ironic eh, so so dangerous a bug didn't implode his computing world.

Personally, I observed the font and just assumed it was a non system font, it looked all squashed and like a fake Helvetica, typical of these cross platform softwares. That was my motivation for changing it.

So thanks to the OP for actually correctly identifying that it was a SFCompactDisplay font being used instead of the display UI font. Anyway I am happy with TitilliumWeb, maybe if this every gets fixed I wont bother editing the css, I should feel so much safer then huh?

[xyzzy]

@GenXstarX Please watch your tone. The points that @luetage made are totally valid. Not all users here are technically savvy and the instructions that you provided, specifically to modify the base files directly and advising users to replace updated files with modded old versions after an upgrade, could result in their Vivaldi installations becoming unusable.

[stardepp]

@GenXstarX said in Customize Vivaldi to use System Font in Browser UI:

Here mate this will be moire helpful than the useless comments of previous posters:

Right click Vivaldi Application 'Show Package Contents"

Navigate the following:

note: '2.4.1488.38' this varies dependant on version.

/Applications/Vivaldi.app/Contents/Versions/2.4.1488.38/Vivaldi Framework.framework/Versions/A/Resources/vivaldi/style/common.css

or Command + Shift + G paste in

/Applications/Vivaldi.app/Contents/Versions/

Then travel from there until you get inside the 'style' folder and see 'common.css'

Open the common.css file in Text Edit or BBEdit is nicer

search for '@font-face' and change all the values under each
then for each section '#browser.mac' change the font to your preference.

see my image attachment

I suggest after editing this file and it's set exactly they way you want, make a copy to another location because any Vivaldi update will replace it, just copy (replace) your edited file back to into location of upgraded version...I just create a folder with the the path as folder name so I remember the location.

Hope this is more helpful than the vague useless BS the other guys posted....My gosh people are unable to respond and think with consideration how another person is supposed to interpret and use information given 'Font declaration in Vivaldi:' useless!!!

Thanks to this manual, I was able to change the system font on my Windows Vivaldi so that I can see my 'Comic Sans MS' font also in the address bar and in the settings. Thanks a lot for this

[xyzzy]

@stardepp Thanks for sharing!

Just a reminder to all: we're here to help each other out as best as we can, learn from each other, and hopefully have some fun in the process. Thanks!

[stardepp]

I have a lot of fun with Vivaldi and I have been here often very friendly helped in the Vivaldi Forum and I would like to thank all of them.

[ajvivaldi]

I came across this threat trying to find out why FIrefox respects my choice of "use my fonts", I like Tahoma for example, and vivaldi doesn't. A good example is the New York Times, I watch the page load (using tahoma), then it quickly reverts to New Times Roman. Am I missing something as I didn't see any other settings?

[stardepp]

This post is deleted!

[stardepp]

You can change the font in the address bar by changing this com.css file:

C:\Program Files (x86)\Vivaldi\Application\2.6.1566.49\resources\vivaldi\style

Open this file as administator.

Everywhere where "font" is written, you change the font to your desired font.

When you're done, save the changes. And make a copy of this file, because after each Vivaldi update, the default font will be restored. Then copy this "common.css" file back into this directory:

C:\Program Files (x86)\Vivaldi\Application\2.6.1566.49\resources\vivaldi\style

That's what it'll look like:

[robrecord]

@GenXstarX Thank you SO much!

The path now is:
/Applications/Vivaldi.app/Contents/Frameworks/Vivaldi Framework.framework/Versions/2.9.1705.38/Resources/vivaldi/style/common.css

I searched for SFCompactDisplay and replaced with SFUIDisplay
There were a lot of @font-face declarations all in once place that all got replaced.

Now my browser is looking NICE!

Before:

After: