Font not changing

Using Streamlit
1

i am trying to change font using css but its not changing

with open('styles2.css') as f:
    st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True) 
st.markdown("<h1 class='Title' >Education</h1>", unsafe_allow_html=True)
# Sample video dictionary (replace with your video data)

with st.sidebar:
          selected = option_menu(
              menu_title="",  # required
              options=[" What is Stocks?", "How Stock Price Moves?", "Fundamental Analysis", "Technical Analysis","Candlestick Chart","Indicators"],  # required
              
              menu_icon="cast",  # optional
              default_index=0,  # optional
          )

if selected == " What is Stocks?":
        st.markdown("<h2 class='Heading' >What is Stocks?</h2>", unsafe_allow_html=True)
        st.markdown("<p class='Para'>A stock is essentially a piece of ownership in a company. When a company decides to go public, it divides its ownership into units called shares. These shares are then sold to investors on a marketplace called a stock exchange.</br>Think of a stock exchange like a giant marketplace where buyers and sellers come together to trade stocks. The exchange sets the rules and regulations for trading, and ensures that all transactions are conducted fairly and efficiently.</br>Here's an analogy: imagine a company as a pizza. When the company goes public, it's like cutting the pizza into slices (shares). These slices are then sold to people (investors) on a platform (stock exchange).</p>", unsafe_allow_html=True)
        image = "stockX.png"
        st.image(image, use_column_width=True,clamp=True,)

css:

@font-face {
  font-family: "secondry-font";
  src: url("fonts/FoundersGrotesk-Semibold.ttf");
}

@font-face {
  font-family: "comicmono";
  src: url("fonts/ComicMono.ttf");
}

html,
body {
  font-family: "secondry-font", monospace;
}

.Para {
  font-family: "comicmono";
}
![Screenshot 2024-04-04 174256|690x195](upload://kM9rgoBRSwM4lFSC4chC8qSoUUJ.png)
2

Hi there :wave:

Have you verified that the path to your font files in the src: url("fonts/YourFont.ttf"); declaration is correct relative to your CSS file or the HTML file?

If your CSS file is located in a different directory than your fonts, you’ll need to adjust the path accordingly.

Thanks,
Charly

4

hi @Charly_Wargnier all is correct

5

Thanks for confirming, @knox.

I’ve not personally had experience with integrating external fonts in Streamlit.

@blackary, is it even possible to do this?

Charly

6

I’m not sure if it’s possible, because to do it as a url you would have to use https://docs.streamlit.io/develop/concepts/configuration/serving-static-files, and that would serve the .ttf files as plain text, which I think will cause the css to not work properly.

But, if you can host them on a different website somewhere (even github directly should work), rather than inside your streamlit app itself, and use that external url, I think that will work.

1 Like
7

i will try it and let you know

1 Like
8

An alternative I recently found is https://fonts.bunny.net/

bunny_fonts

Code: 
import streamlit as st
import requests

font_family = st.text_input("Font family:", value="Akronim")

r = requests.get(f"https://fonts.bunny.net/css?family={font_family}")

if r.status_code == 200:
    st.markdown(
        f"""
        <style>
        /* Insert CSS from fonts.bunny.net */
            {r.text}
        /* Use font for titles */
        h1 {{
            font-family: '{font_family}';
        }}
    </style>
    """,
        unsafe_allow_html=True,
    )

else:
    st.info("Font not found :(")

st.title("The quick brown fox jumps over the lazy dog.")

Edit: The code could be further reduced:

import streamlit as st

font_family = st.text_input("Font family:", value="Akronim")

st.html(
    f"""
    <style>
    /* Import CSS from fonts.bunny.net */
    @import url(https://fonts.bunny.net/css?family={font_family});
    
    /* Use font for titles */
    h1 {{
        font-family: '{font_family}';
    }}
    </style>
"""
)

st.title("The quick brown fox jumps over the lazy dog.")
1 Like
9

@edsaac
it worked thank you and saved extra work

10

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