Styleable Container - custom font

[iuiu34]

Description

Hi, is it possible to customize the font of widget with stylable_container?

code below doesn't work

    with stylable_container(
            key="comic_sans_button",
            css_styles="""
             button {
                 font-family: 'Comic Sans MS', cursive, sans-serif;
             }
             """,
    ):
        st.button("Comic Sans button")

[arnaudmiribel]

Hey @iuiu34,

It is! But you need to adjust the CSS path accordingly. Instead of pointing on the button itself, you need to go and point on the button's text, which is a few elements below (namely > div > p). Here's the updated code:

import streamlit as st
from streamlit_extras.stylable_container import stylable_container

with stylable_container(
        key="comic_sans_button",
        css_styles="""
         button {
            background-color: green;
            color: white;
            border-radius: 5px;
         }

         button > div > p {
             font-family: "Comic Sans MS", "Comic Sans", cursive;
         }
         """,
):
    st.button("Comic Sans button")

Demo:

[arnaudmiribel]

Btw @LukasMasuch is there a cleaner way to do this? I figured if I now added buttons before/after, while they wouldn't get the background applied, they would still use the font family. Is there a way for the font family to be only applied to the container?

[lukasmasuch]

@arnaudmiribel It should work if you add these styles in separate entries in a list, e.g.:

import streamlit as st
from streamlit_extras.stylable_container import stylable_container

with stylable_container(
        key="comic_sans_button",
        css_styles=["""
         button {
            background-color: green;
            color: white;
            border-radius: 5px;
         }
         """,
         """
         button > div > p {
             font-family: "Comic Sans MS", "Comic Sans", cursive;
         }
         """
         ],
):
    st.button("Comic Sans button")

st.button("Other button")

btw. nice usage of the playground :)

[arnaudmiribel]

Oh yea my bad, even better!