Custom Fonts on Streamlit

Hello everybody!

I would like to know if it is possible to change the font for the entire application.

I saw in the customization of themes that streamlit uses the sans-serif font as default, I would like to use the font-family: “Cabin”, sans-serif;

I’d like to use it for all the app, text, widgets, etc.

I tried using some CSS like @andfanilo shows in his youtube video (By the way thanks for the amazing content! I’m your fan!). But I believe my CSS skills are not good enough.

Hi @Guilherme_Hungaro ,

If you want to set the font globally, you can do that in the config file. Go right down to the bottom of the page in this following link.

However, if you want to change the font for some parts of your application, you could refer this link and experiment for yourself.

Cheers

Thanks for your reply friend!

I configured the config file, however it only accepts some fonts (“sans serif”, “serif”, or “monospace”.) the font I want to use seems to be not supported.

Here the message that I receive when try to set font = “cabin” (or Cabin)
2022-06-02 19:08:23.003 “cabin” is an invalid value for theme.font. Allowed values include [‘sans serif’, ‘serif’, ‘monospace’]. Setting theme.font to “sans serif”.

Is there any way I can put a global font other than the ones that are available?

Hi @Guilherme_Hungaro
You need to create a style.css file and put in something like this :slight_smile:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); 

html, body, [class*="css"] {
    font-family: 'Roboto', sans-serif; 
    font-size: 18px;
    font-weight: 500;
    color: #091747;
}

In your main.py you need to put this:


with open( "app\style.css" ) as css:
    st.markdown( f'<style>{css.read()}</style>' , unsafe_allow_html= True)
2 Likes

Thank you very much Ricardo! I’ll try it later and let you know if it worked!

This solved!! Tks a lot Ricardo!

Any time !