I'm customizing the OpenWebUI project, which uses Svelte for the frontend, and I want to display mathematical expressions (numbers, variables, and operators) in Times New Roman font. However, despite making changes to the CSS and Svelte components, the font is not applying correctly to the mathematical content.
What I've Tried:
CSS: I’ve added a .math-content CSS class with font-family: 'Times New Roman', Times, serif; to ensure the font applies to all mathematical expressions. The class is intended to be used for numbers, variables, and operators in the LLM's responses.
Svelte Modifications: In the relevant Svelte components (like MessageInput.svelte and Messages.svelte), I used JavaScript to wrap mathematical expressions in tags with the .math-content class using a regular expression.
The formattedMessage logic is applied using innerHTML, but the .math-content class is not being consistently applied to the expressions.
Font Installation: I’ve ensured that Times New Roman is installed on my system and also added a Google Fonts fallback link, but the math expressions still don’t display in the correct font.
Goal: My goal is for all mathematical expressions (numbers, variables like x, and operators such as +, -, *, /, ^) in the LLM's responses to be displayed in Times New Roman font. Currently, the font is not rendering properly for the math expressions, and I’m unsure why the .math-content class isn’t being applied as expected.