In our web application, each user experiences a unique style with colors, fonts, border widths, and more based on the Material UI JSON theme retrieved from the database upon loading the app.
The challenge lies in handling dynamic fonts. What approaches have been tested for dynamically loading the required font(s) based on the theme? Remember, one user may see a different font compared to another user.
For instance, user one could have this theme setting:
"fontFamily": "'Galaxie', sans-serif"While user two might have this defined in their theme:
"fontFamily": "'Roboto', Arial, sans-serif"Normally, you would use a CSS file or add a line of code in the HTML to load these fonts from the server. However, we aim for user-specific optimization where user one only downloads the Galaxie font, and user two only fetches the Roboto font.
Our current proposed solutions are:
- Require all users to download all fonts (impractical at large scale)
- Generate a CSS file that dynamically populates font definitions depending on user requests from the server