Feature image for the article about how to change the font of the Gnome top bar

How to change the font of the Gnome top bar

Enjoying the Gnome desktop, including the default Gnome Adwaita theme? Just wish the font on the Gnome panel was just a tad smaller? Then you came to the right place. This article explains how you change just the font of the Gnome top bar. It involves creating your own minimal Gnome shell theme, as we’ll cover step-by-step.

Background

The top bar in Gnome, officially called the top panel, always shows on your desktop. On Gnome’s top bar you find the activities button, the clock, the notification area and the name of the currently active application:

Partial screenshot of the Gnome desktop that highlights where the top bar is located.

To change the look and feel of your Gnome desktop, you can tweak four things: the icon theme, the cursor theme, the GTK theme and the shell theme. The latter one controls the look of just the desktop, including the top bar in Gnome. That’s the one we’ll focus on in this article. For more details on theming your Gnome desktop, take a look at this tutorial:

Theming your Gnome desktop can be great fun. A flip side to this coin exists, if you run a rolling release distribution. For example openSUSE Tumbleweed or Arch. With every new major Gnome release, you risk breaking the installed themes and extensions. So going from Gnome 40 to 41 and to 42, etc.

As some of you know, I run the rolling openSUSE Tumbleweed distribution on my main desktop machine. As a result, I run into these issues about every half year, when a new major Gnome version releases. To counter these issues, I put my Gnome extensions on a diet. I install just the must-have ones for my preferred work flow and skip the nice-to-have ones. When it comes to the theme, I tend to stick to just the default Gnome Adwaita theme.

The only thing that bothers me with the Gnome Adwaita theme is the default font size on the Gnome panel, so the top bar. Luckily, you can change the font of the Gnome top bar as I’ll explain in this article.

What do you need

Since this articles focuses on changing the font of the Gnome top bar, we’ll need a Linux desktop distribution with the Gnome desktop environment. Pretty much all major Linux distributions offer a flavor with the Gnome desktop environment, so you can pick whichever you prefer. For this article I decided on using Fedora in a virtual machine. At the time of this writing, Fedora 36 releases soon and I wanted to take the beta for a spin anyways.

This article takes the following approach to changing the font of the Gnome top bar:

  1. Create our own Gnome shell theme.
  2. Import everything from the default Gnome Adwaita theme.
  3. Override just the font in our custom Gnome shell theme.
  4. Configure the Gnome desktop to use our newly created Gnome shell theme.

For this to work, we need a few more puzzle pieces: the Gnome Tweaks application and the User Themes Gnome extension. I’ll cover this in the following sections.

Install the User Themes Gnome extension

In this article we create our own Gnome shell theme for changing the font of the Gnome top bar. To change the shell theme of your Gnome desktop environment, you need the User Themes Gnome extension. For this reason, we start of with installing the User Themes Gnome extension. Fire up your web browser and visit the page of the User Themes Gnome extension:

Web browser screenshot of the User Themes Gnome extension site. It highlights how to install the Gnome extension browser extension.

If you never installed a Gnome extension through your web browser before, the web page presents you with a reminder to first install the browser extension for it. Simply click the Click here to install browser extension link in the light purple colored info box. Next, click the Continue to Installation button and Click the Add button on the next screen to add the browser extension.

Once installed, refresh the web page, for example by pressing the F5 key on the keyboard. The light purple colored info box disappears and instead you’ll see an on/off slider switch. Move it to the On position to install the User Themes Gnome extension:

Partial screenshot of the Gnome User Themes webpage, highlighting how to install the extension.

Install the Gnome Tweaks application

With the help of the Gnome Tweaks application, you can select the shell theme for your Gnome desktop environment. Not all Linux distributions install the Gnome Tweaks application by default. Luckily, you can easily install the Gnome Tweaks application through the Gnome Software application. Just click the search icon and enter the text tweaks. Next, select and install the Gnome Tweaks application:

Screenshot of the Gnome software application that highlights how to locate and install the Gnome Tweaks application.

Create our own Gnome shell theme

After taking care of installing the User Themes extension and the Gnome Tweaks application, we can continue with the creation of our own Gnome shell theme. Our goal is to change the font type and font size of the default Gnome Adwaita theme. Starting out, we’ll create the empty framework for our Gnome shell theme. I’ll do this directly in the terminal. Alternatively, you can use the Nautilus file manager.

Open up your terminal and run these two commands to create an empty Gnome shell theme:

  • mkdir -p ~/.local/share/themes/pragmalin/gnome-shell/
  • touch ~/.local/share/themes/pragmalin/gnome-shell/gnome-shell.css
Terminal screenshot that shows how to manually create a new empty Gnome shell theme.

Import everything from the default Gnome Adwaita theme

Continue by opening the newly created gnome-shell.css file in your text editor. Simply locate the file in the Nautilus file manager and double-click it. This opens the file in the Gedit text editor. Next, add the following line at the top of this file:

  • @import url("resource:///org/gnome/theme/gnome-shell.css");
Text editor screenshot that shows you how to import everything from the default Adwaita Gnome shell theme, into your own shell theme.

Note that if you can’t find the file in the Nautilus file manager, make sure to enable the Show Hidden Files option:

Nautilus file manager screenshot that illustrates how to show hidden files.

Override just the font

At this point our own Gnome shell theme behaves exactly the same as the default Adwaita theme. Now we make the magic happen to change the font of the Gnome top bar. Add the following code to the gnome-shell.css file:

stage {
    font-family: Noto Sans Mono;
    font-size: 10px;
}

This would change the Gnome panel font to a monospaced font and one that is a bit smaller in size, compared to the default. That’s just for demonstration purposes. You can of course change the font and its size to whatever value you prefer. Once ready, save the file and close the text editor.

Select our own Gnome shell theme as the active one

After creating our new custom Gnome shell theme to change the text of the Gnome top bar, let’s try it out. This is where the Gnome Tweaks application comes into play. Open the Gnome Tweaks application. Switch to the Appearance section and change the Shell theme from Default to Pragmalin:

Gnome tweaks screenshot explaining how to change the shell theme to the newly created one that changes the font and font size of the top bar.

Note that it picks up the Gnome shell theme name from the pragmalin subdirectory name, which we created in an earlier step. Feel free to change the directory name to something of your own liking. Here’s what the font of the Gnome top bar and panels look like, after changing the default Gnome shell theme to ours:

Parial Gnome desktop screenshot that shows what the top bar and panels look like after enabling our own shell theme that changes the font and font size of the Gnome top bar.

Wrap up

This article explained how to change the font of the Gnome top bar and its panels. We accomplished this by creating our own Gnome shell theme. In essence, our shell theme imported everything from the default Adwaita theme. Afterwards, we customized just the font. In order to activate our newly created Gnome shell theme, we installed the User Themes Gnome extension and the Gnome Tweaks application.

Note that you can further customize the Gnome shell theme by editing the created gnome-shell.css file. For example, to change the color of the top bar, you would add:

#panel {
    background-color: grey;
}

As a reference for all the Gnome shell theme items that you can change, you can inspect the default Gnome shell theme. You can find it at this location on your system:

  • /usr/share/gnome-shell/theme/gnome-classic.css

PragmaticLinux

Long term Linux enthusiast, open source software developer and technical writer.

View all posts by PragmaticLinux →