16

I am using Ubuntu GNOME 17.04. I want to change the font of the GNOME top bar from the default font by Adapta to Fira Sans. I already have all the fonts, I just want to change the font of the top bar so it doesn't look out of place compared to everything else.

muru
  • 197,895
  • 55
  • 485
  • 740
LionsSharks15
  • 480
  • 1
  • 5
  • 14

4 Answers4

23

You may create a custom css override in your home directory and load it from there (otherwise if you make any change in the theme's style sheet, any update of the theme will most probably overwrite it).

First you should know where the Adapta theme is located. If you have installed it from a .deb package or a PPA it should be located at /usr/share/themes/Adapta and there should be a gnome-shell.css file in /usr/share/themes/Adapta/gnome-shell/.

Now follow the steps below.

  1. Create a directory, say MyTheme either in ~/.themes or in ~/.local/share/themes. (You may create ~/.themes or ~/.local/share/themes if they don't exist.)

  2. Create another directory inside MyTheme called gnome-shell.

  3. Create an empty document in this gnome-shell directory and name it gnome-shell.css.

  4. Open this gnome-shell.css in a text editor and add the following lines

    @import url("/usr/share/themes/Adapta/gnome-shell/gnome-shell.css");

    stage {
    font-family: FONT_NAME, Sans-Serif;
    font-size: 14pt;
}

Change FONT_NAME to a font of your choice (also you may change the font size) and save the file.

  1. Open GNOME Tweak Tools and activate the User themes extension. (If the extension is not installed, you may install it from here.)

  2. Go to Appearance section of Tweak Tools and click on the drop-down box next to "Shell theme". MyTheme should appear in the drop-down list. Select it.

  3. Restart GNOME shell by typing alt+f2 then R+enter (works in an Xorg session, in Wayland logout and login again).

pomsky
  • 68,507
  • font-size did not change the font size on my computer. – Melab Oct 16 '20 at 02:12
  • This method also doesn't work for themes that use gresource files (i.e., Yaru), so you should mention that it won't work in those cases. – Melab Oct 17 '20 at 02:18
  • @Melab You can easily deal with them either by directly importing the resource from a .gresource file into your custom .css file or by manually extracting the required resources from the .gresource file. Feel free to post a new answer addressing these. – pomsky Oct 17 '20 at 03:41
  • Please explain you import a .gresource. – Melab Oct 21 '20 at 19:37
  • I have. Nothing turned up that explicitly mentioned how to import a .gresource file in a custom user theme CSS file. – Melab Oct 21 '20 at 22:34
  • @Melab https://askubuntu.com/questions/572511/how-do-i-open-a-gresource-file – pomsky Oct 21 '20 at 22:41
  • Nope. That talks about extracting .gresource files. – Melab Oct 21 '20 at 22:44
  • @Melab No, it's not just that. Please read the full answer thoroughly, especially the end part (hint: you just need to use @import url("resource://VIRTUAL-PATH"); instead of @import url("ACTUAL-PATH"); as described here). If you still don't understand how to use that answer in your specific case, consider posting a new question asking for more detailed explanations with the link to that answer as a reference. – pomsky Oct 21 '20 at 22:58
2

I have found the answer to my question! The most effective way to change the font of the top bar is to change the font families in the gnome-shell.css file.

To do this, first use 

sudo -H nautilus

to open a root version of Nautilus.

You will then want to navigate to /usr/share/themes/"THEME_NAME"/gnome-shell/gnome-shell.css/. Open the file and where it says something like 

stage { font-size: 10pt; font-family: Roboto, Cantarell, Sans-Serif; font-weight: 400; color: #263238; }

change the first font to the name of your font. The result should be something like 

stage { font-size: 10pt; font-family: Fira Sans, Cantarell, Sans-Serif; font-weight: 400; color: #263238; }

if you changed the font to Fira Sans.

Restart the shell using Alt+F2 and then type r.

Doing this makes the themes you want have the fonts you want instead of changing to Adwaita.

Note: Updates to GTK Themes can mess up this configuration, so pomsky's answer has been marked as the best.

LionsSharks15
  • 480
  • 1
  • 5
  • 14
1

In Ubuntu 19.10 the gnome-shell.css location is:

/usr/share/gnome-shell/theme/Yaru/gnome-shell.css

Edit gnome-shell.css as administrator. Then search for

stage {
  font-family:

Just add your desired font-family name. For example:

stage {
  font-family: Fira Sans, Cantarell, Sans-Serif;
  font-size: 10pt;
  color: #3D3D3D; }

Done. Save it and log-out and log-in again.

Eric Abraham
  • 81
  • No need to logout & login again. Just Alt+F2, type r then enter. This will reload gnome-shell. – Ikbel Aug 31 '20 at 09:54
0

Answering my own question here, changing gnome-shell.css files is no longer needed thanks to the changes provided by GNOME 3.36. Changing the interface font normally now changes the font globally. (everything including the GNOME menu, status bar, etc.)

LionsSharks15
  • 480
  • 1
  • 5
  • 14