Question

font-weight issue while running locally

0

I am currently facing an issue with font weights in my Mendix application. The app is designed to use the standard Open Sans font with various weights, but when I run the app locally, the font weights do not display correctly. In contrast, my coworker can run the same app on their machine without any issues, and the font weights show up as expected. Steps Taken: Hard Reload: Attempted a hard reload in Chrome and cleared the cache. Inspecting DevTools: Checked the Network tab in DevTools, and confirmed the font file is requested with a 304 Not Modified status, indicating it is being cached. CSS Styles: Inspected the CSS styles using DevTools to ensure the correct font-weight is being applied without any overriding styles. Tested Different Browsers: Checked the app on Chrome, Edge, and Firefox, but the issue persists across all browsers. Additional Information: The issue occurs only on my machine, while my coworker's environment displays the font weights correctly. BUT also worth noting, the issue also persists when i load the app up on my laptop. I have confirmed that the correct font files are hosted and accessible. Request: I would appreciate any suggestions or troubleshooting steps to resolve this font weight issue in my Mendix app. Thank you in advance for your help!

asked 2024-10-14

Corina Lopez

6 answers

Manikandan K · Answer 1 · 2024-10-14

Hi Corina,

Check using the browser’s developer tools, to see what css is being applied to the elements that aren’t being rendered correctly. From there you would see what selectors are being applied or not,

Then it’s just an issue of organizing your css files and directives to ensure that the desired directives are being applied to those elements. If it's not available in developer tool then it's for sure some weird issue with Operating system or System resolution.

Hope it helps!

Thanks & Regards,

Manikandan K

Sharad Suryavanshi · Answer 2 · 2024-10-15

Hi Corina,

Try deleting your app locally and download a fresh copy from team server.

as you have mentioned it is working on colleague's machine.

Rene van Hofwegen · Answer 3 · 2024-10-15

Could be a cache issue.

Refresh your browser using CTRL-F5

Of that doesn't do the trick, run you app on port 81. This can be set

Project settings > runtime

Sandeep paul · Answer 4 · 2024-10-15

Hello Corina,

You can download the 'Open Sans' font from Google fonts and paste the fonts in the fonts folder in your system. This way you can view the fonts locally.

Thank you

Marnix Puijker · Answer 5 · 2024-10-15

Have you customized index.html to load the font variants? Or are you following the instructions as per: https://docs.mendix.com/howto/front-end/customize-styling-new/#downloading-font-files ?

If neither is the case, then either too strict CSP settings or a missing {{cachebust}} parameter in the google URL might cause this.

Corina Lopez · Answer 6 · 2024-10-18

hello all, i appreciate all of your help. i was able to fix the issue by performing a clean install of windows 11 on my machine. not sure how the same problem got to my laptop but i'm going to just try reinstalling mendix first before doing the clean install to see if that solves the issue on my laptop.