Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

If I need multiple font files to define a font (e.g. one for normal style and one for italic style), Streamlit will not contextually switch between the two files correctly.

Reproducible Code Example

import streamlit as st

st.header("**fgThis** _fgis_ ***fga*** `fgheader`")
st.subheader("**fgThis** _fgis_ ***fga*** `fgsubheader`")
st.write("**fgThis** _fgis_ ***fga*** `fgwrite`")
st.code("**fgThis** _fgis_ ***fga*** fgcode block #And a code comment")
st.sidebar.header("**fgThis** _fgis_ ***fga*** sidebar `fgheader`")
st.sidebar.subheader("**fgThis** _fgis_ ***fga*** sidebar `fgsubheader`")
st.sidebar.write("**fgThis** _fgis_ ***fga*** sidebar `fgwrite`")
st.sidebar.code("**fgThis** _fgis_ ***fga*** sidebar fgcode block #And a code comment")

Steps To Reproduce

Get Noto font files form Google:
https://fonts.google.com/specimen/Noto+Sans
https://fonts.google.com/specimen/Noto+Sans+Mono

config.toml

[server]
enableStaticServing = true
[[theme.fontFaces]]
family="noto-sans"
url="app/static/NotoSans-Italic-VariableFont_wdth,wght.ttf"
style="italic"
[[theme.fontFaces]]
family="noto-sans"
url="app/static/NotoSans-VariableFont_wdth,wght.ttf"
style="normal"
[[theme.fontFaces]]
family="noto-mono"
url="app/static/NotoSansMono-VariableFont_wdth,wght.ttf"
style="normal"
[theme]
font="noto-sans"
codeFont="noto-mono"

1. Run the app.
2. The normal style font is used everywhere. Italic is simulated by skewing the normal style.

Look at the f ang g characters. f extends below the bottom of the font in the italic Noto Sans, but not for Noto Sans italic.

Also, the default Source Sans script has a different g for normal vs italic (normal has the fancy squiggly bottom) but Noto has the simple bottom on g for both styles.

Expected Behavior

I should be able to create multiple theme.fontFaces entries to fully define a font.

Current Behavior

Not all of the font files are available to the front end:

If you reverse the order of the italic and normal font in config.toml and restart the Streamlit server, then everything will be italic. In that case, the italic file will be available to the front end but not the normal file.

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version:
• Python version:
• Operating System:
• Browser:

Additional Information

Furthermore, if I configure italic first and normal second, but add weight to the normal file's configuration, Streamlit only uses the italic file.

[server]
enableStaticServing = true
[[theme.fontFaces]]
family="noto-sans"
url="app/static/NotoSans-Italic-VariableFont_wdth,wght.ttf"
style="italic"
[[theme.fontFaces]]
family="noto-sans"
url="app/static/NotoSans-VariableFont_wdth,wght.ttf"
style="normal"
weight="100 800"
[[theme.fontFaces]]
family="noto-mono"
url="app/static/NotoSansMono-VariableFont_wdth,wght.ttf"
style="normal"
[theme]
font="noto-sans"
codeFont="noto-mono"

When italic is configured first and the following weight is added to the normal-style font, Streamlit will only use the italic font:
100
"100"
"100 800"

When italic is configured first and the following weight is added to the normal-style font, Streamlit will only use the normal font (but all in the same weight):
400
"400"