Custom fonts not working for iframes (option_menu, pydeck_chart, plotly_chart, etc.)

🎈 Using Streamlit
1

I am trying to use custom fonts for Streamlit using a CSS file. I read all the posts that have anything to do with custom fonts and used the CSS to change the font and it does work for st.header and st.write, but it does not work for any graphs, menus, nav bars, etc. I think it is because those features use iframes. Using the dev tools on chrome, I confirmed that the font is being properly added in the CSS for the iframes, but unfortunately, the font still does not change.

Note, it does work outside the iframes and custom fonts take effect outside of the iframes, but it does not seem to change the fonts inside the iframes.

Of course trying to set the font in the config.toml file did not work because there are only 3 fonts available there. That seems to be a consensus from reading other posts as well.

I also tried to copy the specific classes to the CSS and it still did not work.

Python 3.11 and Streamlit 1.30.0
Same results in both local windows and in the cloud/github.
Testing on Chrome

Example style.css file:

@font-face {
    font-family: 'Bradley Gratis';
    src: url('<.ttf font file url>') format('truetype');
}

html, body, div, p, h1, h2, h3, [class*="css"] {
    font-family: '<font name>';
}
2

Does adding in the font directive in dev tools work when you directly select the element you’re targeting? If you can get devtools to change the font, the CSS selector your using is the issue. If the elements you’re trying to apply styles to are in tabs, their CSS selectors can change without you realizing it, in which case you’d need your selectors to use a wildcard for stuff like the tabs-ui part of the selector.

3

I cannot change the font of anything in the iframe of the streamlit element using devtools, or using my style.css file in streamlit.

Basically, nothing I do changes the font within the streamlit element probably because it is in its own iframe within the streamlit iframe. So is there any way to customize the text in an element in streamlit, for example a streamlit_option_menu?

4

Most likely you’re selecting the wrong element, I’ve experienced similar. You absolutely should be able to impact styling of content within an iframe from devtools.

Once you change the style in devtools, make sure the selector doesn’t change randomly. Moving the iframe around to different places on the page or even reloading Streamlit can cause this to break, so you’ll need to use some wildcard selectors to account for possible changes. Another option would be a more universal, sitewide selector that changes all elements of that type no matter where they are.

6

I did not mean to delete the post above.

Thanks for your quick reply. I spent quite some time trying many of the selectors, but none have worked so far.

I was able to change the font through the style parameter of option_menu, to one of the fonts already in streamlit “sans serif”, “serif”, or “monospace”, but this is not what I want.

So, in other words, the font can be changed, but not too a custom font, only to the 3 fonts already in streamlit, but not to a custom font.

I think the issue might be that the iframe component in the streamlit app does not have access to the custom font.

Is there a way to load the custom font into the iframe so the CSS in the iframe has access to it?