Using custom fonts

Using Streamlit
1

Hi, I was wondering if I can use a custom font instead of the predefined three in the Edit Theme menu in setting? There I only see three options in the font family menu: sans serif, serif and monospace.

I have some tff font files I downloaded and I would like to use them instead.

I am new to streamlit and not that experienced with css. I would appreciate some examples and references.

I see that it is possible to override using st.markdown as given here . and this guide

But it doesn’t seem to work.

def style():
    css = """
    <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> 
    <style>
    @font-face {
        font-family: 'My Font';
        font-style: normal;
        src: url(assets/fonts/myfont.tff) format('truetype');;
    }
    .sidebar-text{
        font-family: 'Roboto', sans-serif;
    }
    .standard-text{
        font-family: 'My Font';
    }
    </style>
    """
    st.markdown(css,unsafe_allow_html=True)

style()
3 Likes
2

Hi,

I am having the same issue as @cozek here.

I want to use a custom font family for all the widgets, the markdown, buttons, but there seems to be no documented way of doing so.

Can anybody help?

(I’d like to import the fonts from a ttf file for the whole app)

Thanks!

3

This works

import streamlit as st


t = st.radio("Toggle to see font change", [True, False])

if t:
    st.markdown(
        """
        <style>
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/tangerine/v12/IurY6Y5j_oScZZow4VOxCZZM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    html, body, [class*="css"]  {
    font-family: 'Tangerine';
    font-size: 48px;
    }
    </style>

    """,
        unsafe_allow_html=True,
    )

"# Hello"

"""This font will look different, based on your choice of radio button"""

image
image1085×1391 33.2 KB

image
image988×710 10.9 KB

Best,
Randy

1 Like
4

Hey Randy, can you tell how to use fonts from font files like ttf file or woff file? I see that you have provided the url to the font but that sometime doesn’t work if the url is changed or removed. Please let me know.
Thanks.

5

Hi @WhiteWolf, welcome to the Streamlit community!

In the case of having a URL, you could also have the file in your GitHub repo, then refer to its url.

According to StackOverflow, it’s possible to also base64 encode the actual file and put it inline in the code:

I haven’t tried, but something else you can pursue.

Best,
Randy

7

Thanks, Randy. For some reason when I use this code, the font size changes, but the font family itself doesn’t change. Do you know what might be going on?