Custom fonts didn't work streamlit version 1.27 above

Using Streamlit
1

Plz, excuse my not fluent english writing.

  1. Are you running your app locally or is it deployed?

Locally

  1. If your app is deployed:
    a. Is it deployed on Community Cloud or another hosting platform?
    b. Share the link to the public deployed app.

Locally

  1. Share the link to your app’s public GitHub repository (including a requirements file).

see below

  1. Share the full text of the error message (not a screenshot).

see below

  1. Share the Streamlit and Python versions.

see below

I upgraded streamlit version from 1.26 to 1.27, 1.28, 1.29.

ver 1.26 custom fonts affects text elements
but, ver 1.27 above (to 1.29) custom fonts didn’t work at all

so I downgraded streamlit version from 1.29 to 1.26 now.

Is there any solution to activate custom fonts?

[style.css]

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500&display=swap');


html, body, [class*="css"] {
    font-family: 'Noto Serif KR','Noto Serif KR';
    font-weight: 900;
}

[apply css to app.py]

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

Hi @hojin,

Thanks for posting!

Instead of loading CSS from an external file, try including it directly in your Python code like so:

css = """
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500&display=swap');

html, body, [class*="css"] {
    font-family: 'Noto Serif KR','Noto Serif KR';
    font-weight: 900;
}
"""

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
3

I Tried with streamlit ver 1.29, but it didn’t work…

4

Can you share your repo/code so I can replicate the issue and find a solution for you?

5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.