How to Import Multiple Fonts in Mendix

0
Hello Mendix Community,   I am currently working with the White Label module from Kobeon and facing a challenge related to dynamic font adjustment at runtime.   Here's the situation: I have added four different fonts with their corresponding CSS files, and I've placed the .ttf files in the correct location. Now, when I set the font to, for instance, "Space Mono", sans-serif, it only changes when I have $font-family-import: "fonts/space-mono/space-mono.css"; in my custom-variables  (in the screenshot I used open-sans). This makes sense as it specifies to load fonts from space-mono.css, but the issue arises with the other fonts – they don't work under this setup. I have only one variable, $font-family-import, to import the fonts, but I need to import all four. I suspect that it's not intended to put all font families in a single CSS file.   My question is: How can I import all four font families effectively? Any guidance or suggestions on how to approach this would be greatly appreciated.   Thank you in advance for your help!     Update:   I fixed it for now with    $font-family-import: "fonts/all-fonts.css";   that contains:    @import 'open-sans/open-sans.css'; @import 'dm-sans/dm-sans.css'; @import 'cormorant-garamond/cormorant-garamond.css'; @import 'space-mono/space-mono.css';   It works great, but I am not sure if it is good practice.
asked
1 answers
1

You can create file .scss at folder .../theme/web/SpaceMono.scss

and in  file SpaceMono.scss  is a...

@font-face{
    font-family: "Space Mono";
    src : url("SpaceMono/SpaceMono-Regular.ttf") format("truetype");  // this file .ttf
    font-weight: 400;
}

@font-face{
    font-family: "Space Mono";
    src : url("SpaceMono/SpaceMono-Bold.ttf") format("truetype"); 
    font-weight: 600;
}

 

1.go to file "main.scss" 

2. add >> @import "space-mono.scss"

 

I hope this help.

answered