In Aggrid how to change the font family from static folder. custom_css is not working

Custom Components streamlit-aggrid
,
1

Hi, I have a issue in aggrid where a font kept in streamlit static is working correctly for all streamlit except for Aggrid. I tried various methods and taken help from chatgpt etc but it is not working. I have zero knowledge about css etc so any help is appreciated.

import pandas as pd
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder, StAggridTheme

data = {"sku": ["Olivia Bryson", "Sophie Greyson", "Daisy Easton"], "store": ["Store1", "Store2", "Store3"],

        "price": [10.5, 20.75, 15.0], "quantity": [100, 150, 200], "diff": [0.1, 0.5, 0.2]}

custom_css = """

@font-face {

    font-family: 'Inter';

    src: url('app/static/fonts/Inter-Regular.woff2') format('woff2');

    font-weight: 400;

    font-style: normal;

}

@font-face {

    font-family: 'Inter';

    src: url('app/static/fonts/Inter-Bold.woff2') format('woff2');

    font-weight: 700;

    font-style: normal;

}

.ag-root-wrapper {

    font-family: 'Inter', sans-serif !important;

}

"""
custom_css_new = """

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.ag-root-wrapper {

    font-family: 'Inter', sans-serif !important;
}

"""
custom_theme = (
    StAggridTheme(base='balham')
    .withParts('iconSetAlpine')
    .withParams(
        accentColor="#EC3487",
        rowBorder=True,
        backgroundColor="#FFFFFF",
        fontFamily="'Inter', sans-serif", 
        fontSize=14,
        spacing=4,
        cellHorizontalPaddingScale=0.5,
        headerFontFamily= "'Inter', sans-serif",
        headerFontSize= 15,
        headerTextColor= "#130106",
        headerFontWeight= 500,
    )
)
df = pd.DataFrame(data)

gb = GridOptionsBuilder.from_dataframe(df)

grid_options = gb.build()

res = AgGrid(df,

             gridOptions=grid_options,

             enable_enterprise_modules=True,

             key="asdf",

             allow_unsafe_jscode=True,

             theme=custom_theme,

             custom_css=custom_css_new

             )


st.subheader("Streamlit Dataframe")
st.dataframe(df)

Here is streamlit config file

[theme]
base=“light”
font=“Inter”

[[theme.fontFaces]]
family=“Inter”
url=“app/static/fonts/Inter-Regular.woff2”
weight=400
style=“normal”

[[theme.fontFaces]]
family=“Inter”
url=“app/static/fonts/Inter-Bold.woff2”
weight=700
style=“normal”

[[theme.fontFaces]]
family=“Inter”
url=“app/static/fonts/Inter-Italic.woff2”
weight=400
style=“italic”

[server]
enableStaticServing = true
2

after trying multiple failed attempt with various LLM, what kind of working is this custom css. still not from static though which is what i really want.

custom_css_claude = {

\# This injects a @font-face rule - use the special key format

"@font-face": {

    "font-family": "Inter",

    "src": "url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2')",

    "font-weight": "400",

},

".ag-root-wrapper": {

    "font-family": "Inter, sans-serif !important",

},

".ag-header-cell-label": {

    "font-family": "Inter, sans-serif !important",

},

".ag-cell": {

    "font-family": "Inter, sans-serif !important",

},

}