Hacking font not posible in 1.27

🎈 Using Streamlit
1

hi,
with streamlit<=1.26, you could customize the font. Doing a “hack” like

theme_css = """
<style>
/* font */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html, body, [class*="css"] {
    font-family: 'Roboto', monospace;
}
</style>
"""
st.markdown(theme_css, unsafe_allow_html=True)

But now, in streamlit==1.27, this doesn’t work anymore. In particular, markdown widgets (among others) doesn’t inherit.
Is this desired behavior?

thanks

2

font is part of theming with streamlit you look over doc to theme your app with fonts and importing font
streamlit theming docs

3

Native font theming, only supports “sans serif”, “serif”`, and “monospace”. Which is very limited. With the hack, you could (in <=1.26) use other standards (like “roboto” in the example), and give more proper personalization

4

Hi @iuiu

Similar to what you have implemented, this still works for me in the latest Streamlit version:

st.markdown("""
  <style>
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700bold);
  </style>
""", unsafe_allow_html=True)
1 Like
5

And this is inherited to all widgets?

Cause with 1.28 doesn’t seem to work for met all (for <=1.26 yes)

6

One below seems to work with st==1.28

<style>
/* font */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*, *::before, *::after {
    font-family: 'Roboto', sans-serif;
}
</style>