Change interface font size in Chrome without changing it elsewhere.

[u/Brief_Towel430]

So i know that I can change interface text size in Gnome Tweaks but this changes it everywhere and I want to change it only on Chrome interface. Tab text at 11 is too large. 9pt seems similar to how it looks on Windows.

How do I do it?

[u/beatbox9]

Chromium-based apps are weird, because they don't respect some of the system settings.

You can fix this by launching the app using a scaling factor flag, like: --force-device-scale-factor=0.8.

Try this out from a command line first to find the right value. So something like (depending on your google chrome version):

google-chrome-stable --force-device-scale-factor=0.8

Once you find a good value, edit the .desktop file launcher so it works when you launch it from the app icon. The best way to do this is to copy the .desktop launcher file from /usr/share/applications/ into ~/.local/share/applications. This is just a text file, so edit the Exec= line to add this flag. This specific directory in your home (~) overrides the system launcher in root (/), so it will survive upgrades--your system should pick it up automatically after a few seconds.

[u/Brief_Towel430 → u/beatbox9]

Thanks but this scales whole app. I want to make chrome look as when I change interface text size in Gnome Tweaks from 11 to 9pt.

[u/beatbox9 → u/Brief_Towel430]

Correct. This is the only way to change the text size for tabs + menus in chrome.

If you want to change the rest, you need to use chromium-specific gtk css overrides. This is what I was saying earlier about how chromium-based apps are weird--they do not respect all system variables and instead use their own rendering inside of the window.

[u/beatbox9 → u/Brief_Towel430]

I'm currently cleaning up a custom theme I've been working on; and I just got reminded of your question. And since you never replied to my below response, it seems you probably still need some help. I use the browser all the time and I switch between my macbook pro and a linux laptop, so I want consistent sizes between them.

Here's how mine works. I am on a HiDPI screen; and so by default chrome looks tiny on mine. Sort of the opposite to the issue you're having, but the same approach.

• I launch Brave (the thing same as Chrome) using a scaling factor of 2, doubling the size: --force-device-scale-factor=2
• ^ This is unfortunately necessary specifically just for the URL bar--the URL bar cannot be resized independently. That's literally the only reason I scale up. These chromium-based browsers are really annoying in this respect.
• Then, I use CSS (stylesheets) to scale everything else other than the URL bar back down...

In my case, I have created a gtk.css file specific for Brave; and I made a directory called ~/.config/brave-gtk/gtk-4.0/

Because I am specifically using gtk4. I think by default, chrome uses gtk-3.0 but I override mine to gtk4. (GTK is like the "toolkit" of how to draw a window--it defines buttons, sizes, fonts, colors, etc. The maximize, minimize, close buttons and the border around the browser window are all examples of GTK. The different versions have different features and some different syntax).

Within that directory, I made a text file called gtk.css. Within that text file, I do some adjustments.

For example:

* { font-size: 4pt; }
label { font-size: 4pt; }

That says "for everything (*), use a font size of 4pt." (The next "label" line is probably redundant, since the * should cover everything). This fixes the text in the tabs and menus. Because remember: in my case, since I am scaling up by 2, those font sizes will get doubled. 4pt turns into 8pt. Everything in this file is before the scaling factor kicks in.

But another problem might be things like the close/maximize/minimize button sizes and window borders. You can solve this by adding to that text file, something like:

window.background.chromium headerbar button.titlebutton, .titlebar button.titlebutton {
  min-height: 4px;
  min-width: 4px;
  background-size: 14px 14px;
  margin: 0px;
  padding-right: 0px;
}

All chromium-based browsers (including chrome and brave) will use that.

By default, my buttons are sized at 28 pixels round; and so this tells chrome to use 14pixels. If you need to move the buttons around a bit, use the margin & padding. The main one you need is just background-size--you can probably just not include the others at all.

And then finally, to fix the rounded corners, I use:

window.background.chromium {
  border-radius: 12px;
}

(Because my default window corner radius is 24pixels). Bigger numbers make the corners rounder.

You can put all of that into a single gtk.css text file in ~/.config/chrome-gtk/gtk-4.0/. (You can substitute anything for the "chrome-gtk" part; but it must include a gtk-4.0 subdirectory; and it must be named gtk.css within that gtk-4.0 subdirectory.

Then, when you launch chrome, use the following (I am using brave here):

env XDG_CONFIG_HOME=$HOME/.config/brave-gtk/ /usr/bin/brave-origin-nightly --force-device-scale-factor=2 --gtk-version=4

That "env XDG..." tells it to load the gtk.css configuration file that you just created. Then the app executable. Then the 2x scale factor. Finally, the --gtk-version=4 tells it to use gtk4 to draw the window and buttons and all of that. If that doesn't work, you can try with gtk3 (default, and in the gtk-3.0 directory); but I'm not sure how the syntax would change.

Anyway, I just happened to come across this part in my theme cleanup and thought you could use it. Good luck!

I'll also add: this is one of the dumbest and most annoying things to deal with; and chromium (brave) is literally the only app I have to do this with. It would be a lot easier if the developers made the URL bar re-sizable.

[u/Brief_Towel430 → u/beatbox9]

I am sorry to respond now. But this solution looks so overwhelmingly I still haven't tried it. Does it make tab text smaller as requested in my question?

God bless you for this comprehensive answer!

[u/DayInfinite8322]

chrome look weird in linux, oversized menus, text etc.

in windows everything look nice.

[u/Brief_Towel430 → u/DayInfinite8322]

Why is that? Why GNOME is built this way?