Using Arabic fonts on streamlit application

Using Streamlit
1

I am developing an app using streamlit, but when I want to add some Arabic fonts on the CSS using markdown(), it doesn’t work no matter what I try, any idea of this problem?
Thank you!

2

Hi @beginprogrammer, welcome to the Streamlit community!

I’m not familiar with the language, but this example seems to work:

 import streamlit as st

st.markdown(
    """
    <p>The Arabic word for "website" is <bdi>موقع الكتروني</bdi></p>
    """,
    unsafe_allow_html=True,
)

image
image1449×1454 41.9 KB

1 Like
3

Thank you very much for your reply, but actually the main problem is that I cannot use customized fonts, for example, writing this script does not change the font:

 import streamlit as st

    st.markdown(
        """
        <p>The Arabic word for "website" is <bdi style= '
        font-family: 'Adobe Arabic';'>موقع الكتروني</bdi></p>
        """,
        unsafe_allow_html=True,
    )
4

How about

import streamlit as st

st.markdown(
    """
    <link href="//db.onlinewebfonts.com/c/6b75b24d502dab23003320c2e1b2fc68?family=Adobe+Arabic" rel="stylesheet" type="text/css"/>
    <style> bdi {font-family: 'Adobe Arabic';}</style>

    <p>The Arabic word for "website" is <bdi>موقع الكتروني</bdi></p>
    """,
    unsafe_allow_html=True,
)
2 Likes
5

It worked!
Thank you very much, it was really a big help!

1 Like