Custom fonts are not passed to custom components

[gquinche]

When using the "new" theming options of streamlit the fonts are not being passed to my react component, and thus they fail to render correctly, I'm thinking on having a custom parameter that is passed to react so it knows the location of the static folder used for the fonts but this seems hacky. I know you are working on a new version of components, but is there a suggested way to do this?

[gquinche]

I have sketched a solution to the problem here.

To dynamically load a custom font, place the font file in a static/ folder next to your Streamlit app's main script. Streamlit will serve these files, making them accessible to your component.

File Structure: Place your font file (e.g., LeagueSpartan.ttf) in a static/ directory at the root of your Streamlit app.

.
├── your_app.py
└── static/
└── LeagueSpartan.ttf

Referencing the Font: In your React component code, reference the font file with a path relative to the app's root, like so: /LeagueSpartan.ttf. No need to add the app/static or even the /static/ part

Loading Logic: The theme.font property is automatically provided by Streamlit based on the user's configuration, which they can change in their config.toml file, this can be used in react to search for the font file in the static folder if they match. If you want to allow users to override this, you can also add an extra font_file_name parameter to your component. The component's logic should check for this explicit parameter first and, if it's not present, fall back to using the font name from the theme property. This approach gives users control over their font choices without forcing a specific one.

This allows the component to automatically find and apply a custom font based on the user's Streamlit theme settings.

Finally, to use the font I ended up using the Font api and document.fonts.add, I'm still working on a solution so default fonts work correctly given they are not on the static folder by default.

[gquinche]

I ended ditching the fontapi as it caused unexpected bugs. I plan to publish a repo with my final code so others can use, still I'm wondering if this will be solved by components v2