How to apply costum font to multipage app pages

Using Streamlit
, ,
1

I am running a local multipage streamlit app and use a style.css file for a costum font, which works for the sidebar and other Streamlit elements. The app uses seperate Python files for each page. I added “with open(‘style.css’) as f:
st.markdown(f’{f.read()}', unsafe_allow_html=True)”
at the top of each app page, but the font from the style.css file does not apply to the text on the app page. How do i get this to work? Or is this a known issue? I also added the style markdown in the main python file.

Versions: Python 3.11.9, Streamlit 1.41.0

2

You were almost right. The below should work.

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

If you want to use pathlib:

import pathlib
import streamlit as st 


def load_css(file_path):
    with open(file_path) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

universal_css_path = pathlib.Path("style.css")
load_css(universal_css_path)
3

Hey! Thanks for the reply! I applied the change, but the font still only applies to the sidebar and not the st.header()'s and st.markdown()'s.

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

/* Set the font family */
html, body, [class*="css"] {
  font-family: 'Space Grotesk', sans-serif;
}

This is my css file, at least the part with the font face.

Maybe this has to do with my multipage app, or maybe i’m missing something else… :frowning: