How to change font to custom google api font in st version 1.30.0

Using Streamlit
1

Hi, I attempted to change the font in my app using the Google API, but it doesn’t seem to be working. I tried downgrading to version 1.26.0, and it worked fine. What should I do if I want to use version 1.30.0 and still have the font change working?

this is my css file

image
image898×248 8.57 KB

and I use this in my main.py

image
image848×150 7.15 KB

2

Help

3

Hello @Nattametee_Channithi,

  1. Define Your CSS with the Google Font
/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}
  1. Apply the CSS in Your Streamlit App
import streamlit as st

# Function to load and apply CSS
def load_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

# Load and apply the CSS file at the start of your app
load_css('style.css')

# Your app code here
st.title('Custom Font Example')
st.write('This text should use the Roboto font.')

Kind Regards,
Sahir Maharaj
Data Scientist | AI Engineer

P.S. Lets connect on LinkedIn!

➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ Want me to build your solution? Lets chat about how I can assist!
➤ Join my Medium community of 30k readers! Sharing my knowledge about data science and AI
➤ 100+ FREE Power BI Themes: Download Now

4

It doesn’t work…

after ver 1.26.

5

Do you need to always have a css file to load the font or can you add the font as a variable and on the code base then load it via a string call like st.markdown

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

body {
    font-family: 'Roboto', sans-serif;
}
"""

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

something like this