Deion Hi, is it possible to customize the font of widget

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Btw <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Styleable Container - custom font about streamlit-extras HOT 4 CLOSED

iuiu34 commented on June 2, 2024

Styleable Container - custom font

from streamlit-extras.

Comments (4)

LukasMasuch commented on June 2, 2024 1

@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 :)

from streamlit-extras.

arnaudmiribel commented on June 2, 2024

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:

from streamlit-extras.

arnaudmiribel commented on June 2, 2024

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?