Gtk3 button how to set font size

Question

I'm writting a little application with Python and Gtk3. Almost everything runs ok but one thing : I can't change my button font size using CSS. I can change font family (arial, ...) colors, background-colors but the font size seems to be ignored. Do you have any tip ?

Here is my code:

from gi.repository import Gtk, Gdk
class Monelio:
    def __init__(self):
        # load CSS
        style_provider = Gtk.CssProvider()
        css = open('monelio.css')
        css_data = css.read()
        css.close()
        style_provider.load_from_data(css_data)
        Gtk.StyleContext.add_provider_for_screen(
            Gdk.Screen.get_default(), 
            style_provider,     
            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
        )
        # load CSS
        style_provider = Gtk.CssProvider()
        css = open('monelio.css')
        css_data = css.read()
        css.close()
        style_provider.load_from_data(css_data)
        Gtk.StyleContext.add_provider_for_screen(
            Gdk.Screen.get_default(), 
            style_provider,     
            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
        )
        button1 = Gtk.Button()
        button1.set_label(" - ")
        button1.set_name("btn_moins_" + str(x+1))
        button1.set_size_request(80, 70)
        button1.get_style_context().add_class("btn_moins")
        button1.connect("clicked", self.on_btn_moins_clicked)
        button1.show()

and my css:

.btn_moins {
    background-color: orange;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 25;
    padding: 0 20px 0 20px; 
}

Welcome to Stack Overflow. Could you provide a code sample of what you have attempted thus far? You can click the "edit" button beneath the tags for your question to do so. — BlackVegetable, Feb 23 '14 at 21:29
This is an old thread, but you may want to provide a "units" for the font setting in the css: font-size: 25px; or font-size: 25pt; or font-size: 2em; — RLI123, Oct 19 '14 at 22:58

score 2 · Answer 1 · answered Sep 07 '14 at 18:41

I wanted to help you and i wanted to learn how to use css on PyGobject but you only posted a small part of the code and it is not useful.

Here you have a font example:

from gi.repository import Gtk

class LabelWindow(Gtk.Window):

    def __init__(self):
        Gtk.Window.__init__(self, title="Label Example")

        hbox = Gtk.Box(spacing=10)
        hbox.set_homogeneous(False)
        vbox_left = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, spacing=10)
        vbox_left.set_homogeneous(False)
        vbox_right = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, spacing=10)
        vbox_right.set_homogeneous(False)

        hbox.pack_start(vbox_left, True, True, 0)
        hbox.pack_start(vbox_right, True, True, 0)

        label = Gtk.Label("This is a normal label")
        vbox_left.pack_start(label, True, True, 0)

        label = Gtk.Label()
        label.set_text("This is a left-justified label.\nWith multiple lines.")
        label.set_justify(Gtk.Justification.LEFT)
        vbox_left.pack_start(label, True, True, 0)

        label = Gtk.Label(
            "This is a right-justified label.\nWith multiple lines.")
        label.set_justify(Gtk.Justification.RIGHT)
        vbox_left.pack_start(label, True, True, 0)

        label = Gtk.Label("This is an example of a line-wrapped label.  It "
                          "should not be taking up the entire             "
                          "width allocated to it, but automatically "
                          "wraps the words to fit.\n"
                          "     It supports multiple paragraphs correctly, "
                          "and  correctly   adds "
                          "many          extra  spaces. ")
        label.set_line_wrap(True)
        vbox_right.pack_start(label, True, True, 0)

        label = Gtk.Label("This is an example of a line-wrapped, filled label. "
                          "It should be taking "
                          "up the entire              width allocated to it.  "
                          "Here is a sentence to prove "
                          "my point.  Here is another sentence. "
                          "Here comes the sun, do de do de do.\n"
                          "    This is a new paragraph.\n"
                          "    This is another newer, longer, better "
                          "paragraph.  It is coming to an end, "
                          "unfortunately.")
        label.set_line_wrap(True)
        label.set_justify(Gtk.Justification.FILL)
        vbox_right.pack_start(label, True, True, 0)

        label = Gtk.Label()
        label.set_markup("Text can be <small>small</small>, <big>big</big>, "
                         "<b>bold</b>, <i>italic</i> and even point to "
                         "somewhere in the <a href=\"http://www.gtk.org\" "
                         "title=\"Click to find out more\">internets</a>.")
        label.set_line_wrap(True)
        vbox_left.pack_start(label, True, True, 0)

        label = Gtk.Label.new_with_mnemonic(
            "_Press Alt + P to select button to the right")
        vbox_left.pack_start(label, True, True, 0)
        label.set_selectable(True)

        button = Gtk.Button(label="Click at your own risk")
        label.set_mnemonic_widget(button)
        vbox_right.pack_start(button, True, True, 0)

        self.add(hbox)

window = LabelWindow()        
window.connect("delete-event", Gtk.main_quit)
window.show_all()
Gtk.main()

score 2 · Answer 2 · answered Feb 23 '18 at 14:00

Use CssProvider

on window created:

screen = Gdk.Screen.get_default()
gtk_provider = Gtk.CssProvider()
gtk_context = Gtk.StyleContext()
gtk_context.add_provider_for_screen(screen, gtk_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
#css = """#styled_button { font-weight: bold; font-size: 22; }""" #also valid
css = """#styled_button { font: bold 16}""" #bold is not necessary 
gtk_provider.load_from_data(css)

on button created:

button.set_name("styled_button")

But you don't have to set widgets name, you can also...

Set style for all widgets: (css = "GtkButton { font: 16}")

Set style from methode:

...
css = "GtkButton { font: 16}"
...

def on_button_clicked(self, widget, valid):
    style_context = widget.get_style_context()
    if valid:
        style_context.add_class("bigger")
    else:
        style_context.remove_class("bigger")

score 0 · Answer 3 · answered Oct 05 '22 at 23:15

I tried @oxidworks method and, although it seems like it should work, I wasn't having any luck.

What I noticed while playing with the CSS was that changing the font size for labels would affect buttons as well. So it seems GtkButtons use GtkLabels internally. Instead of setting the CSS property on the ID itself (which it doesn't complain about) I set it on the label descendant of the button and now the font size works. Maybe I'm an edge case?

#some_button > label {
    font-size: 16px;
}

Gtk3 button how to set font size

3 Answers3

Use CssProvider

on window created:

on button created:

But you don't have to set widgets name, you can also...