Local custom font

Using Streamlit
1

Hi,
I want to use custom font using woff font but it does not work. I suppose it is access to local font url.
Can you tell me what is wrong in my code?
Thanks.

Blockquote
st.markdown(“”"

@font-face {
font-family: ‘Futura PT Light’;
font-style: normal;
font-weight: normal;
src: local(‘Futura PT Light’), url(‘layout/FuturaCyrillicLight.woff’) format(‘woff’);
}
html, body, [class*=“css”] {
font-family: ‘Futura PT Light’, sans-serif;
}
“”", unsafe_allow_html=True)

2

Hi @dnaura,

Have you tried adding the file to your GitHub repo and then referencing that URL rather than the local path? Check out this related thread.

Caroline

3

Hi Caroline,
My problem is that my app is on a local server with no access to internet, so no Github repo.
I suppose there is a mistake in the way I reference the url but I don’t see what.
Thanks.
David

4

@dnaura I assume you’re also running the Streamlit app locally?

5

Yes I do.

6

@dnaura This is not recommended for anything but a locally running streamlit app with no internet access, but there’s a hack you can do that moves the font file to wherever streamlit is installed on your machine, and then references that. CSS won't render in deployed app (using components.html())

If you have internet access, it’s much better to reference a file somewhere on the internet, but in your case this should work.

Here’s a working script:

import shutil
from pathlib import Path

import streamlit as st


def move_font_files():
    STREAMLIT_STATIC_PATH = Path(st.__path__[0]) / "static"
    CSS_PATH = STREAMLIT_STATIC_PATH / "assets/fonts/"
    if not CSS_PATH.is_dir():
        CSS_PATH.mkdir()

    css_file = CSS_PATH / "FuturaCyrillicLight.woff"
    if not css_file.exists():
        shutil.copy("layout/FuturaCyrillicLight.woff", css_file)


st.markdown(
    """
    <style>
@font-face {
font-family: 'Futura PT Light';
font-style: normal;
font-weight: normal;
src: local('Futura PT Light'), url('assets/fonts/FuturaCyrillicLight.woff') format('woff');
}
html, body, [class*="css"] {
font-family: 'Futura PT Light', sans-serif;
}
</style>
""",
    unsafe_allow_html=True,
)

st.write("Test!")

if st.button("Move font files"):
    move_font_files()
2 Likes
7

@blackary Thanks a lot. I will give it a try.

8

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