How to access External Fonts in streamlit application

Using Streamlit
,
5
  1. If you have a file ./static/foo.woff relative to your entrypoint file, and you turn on static file serving, then the file is accessible on your frontend at the path app/static/foo.woff. app is exactly one “a” and two “p”-s and not a keyword to be replaced by anything.
  2. The [[theme.fontFaces]] declaration should work with any font file. If you are specifically hosting the font file with your app, static filing serving supports OTF, TTF, WOFF, and WOFF2.
  3. You can define as many fonts in config.toml as you want. Just repeat the [[theme.fontFaces]] table. Example 1 shows defining two different fonts.
  4. Once all your fonts are hosted (turn on static file hosting, save your font files in the static/ directory, and declare each of them in their own [[theme.fontFaces]] table), you can then point to those fonts in other configuration options. Streamlit lets you define font separately for body text vs headers vs inline/block code. You can also set these separately for the main body and sidebar. If you need to set font any more precisely, then you’d need to inject CSS, but you can still take care of all your @font-face declarations through config.toml.
1 Like