How to access External Fonts in streamlit application

[sridharr]

Hi Streamlits,

Good Evening. In one of my project, i have been asked to use “SFMono-Regular.woff2” and "“SFMono-Regular.woff” font. so i downloaded it over online. I kept the files under “working-directory/static/fonts/SFMono-Regular.woff2”.

and i created a style.css with below code to access in app.py;

@font-face {
    font-family: 'SF Mono';
    src: url('/static/fonts/SFMono-Regular.woff2') format('woff2')
         url('/static/fonts/SFMono-Regular.woff') format('woff');  
    font-weight: 400;
    font-style: normal;
}
:root {
    /* Fonts */
    --font-primary: 'SF Mono', monospace;
}
body {
    font-family: var(--font-primary);
}

and In app.py file. i used the below lines for access the style.css

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

load_css()

but i am not able to see the font difference. When i Inspect, i see the font response header is not having content-type : font/woff2 or font/woff; Also getting 304 status.

kindly help me to resolve this

[blackary]

You can do it by setting the font in .streamlit/config.toml, like this:

[theme]
font = "SF Mono"

[[theme.fontFaces]]
family = "SF Mono"
url = "app/static/SFMono-Heavy.otf"
weight = 400
style = "normal"

config.toml - Streamlit Docs

[mathcatsand]

Just to make sure it’s not missed:

Note that @blackary used app/static/SFMono-Heavy.otf and not static/SFMono-Heavy.otf. Static file serving requires app/ in the path.

[sridharr]

@blackary @mathcatsand , Thanks for the immediate support.

other doubts:

1. “app/static/SFMono-Regular.woff2”, here whether “app” refers to working directory or “app” folder under working directory

2. whether all fonts formats like otf, woff, woff2 will be supported?

3. Suppose if i want to use multiple fonts like SFMono-Regular, Inter with different font weight. Is the procedure is same.

4. In style.css sheet, we use like

--font-primary: "SF Mono", monospace;
--font-secondary: "Inter", serif;

is it possible to configure like above in config.toml or help me how to do the same.

[mathcatsand]

1. If you have a file ./static/foo.woff relative to your entrypoint file, and you turn on static file serving, then the file is accessible on your frontend at the path app/static/foo.woff. app is exactly one “a” and two “p”-s and not a keyword to be replaced by anything.
2. The [[theme.fontFaces]] declaration should work with any font file. If you are specifically hosting the font file with your app, static filing serving supports OTF, TTF, WOFF, and WOFF2.
3. You can define as many fonts in config.toml as you want. Just repeat the [[theme.fontFaces]] table. Example 1 shows defining two different fonts.
4. Once all your fonts are hosted (turn on static file hosting, save your font files in the static/ directory, and declare each of them in their own [[theme.fontFaces]] table), you can then point to those fonts in other configuration options. Streamlit lets you define font separately for body text vs headers vs inline/block code. You can also set these separately for the main body and sidebar. If you need to set font any more precisely, then you’d need to inject CSS, but you can still take care of all your @font-face declarations through config.toml.