From https://fonts.google.com/, I downloaded the "Kanit" font package. From this package, I want to use multiple fonts, such as Kanit-Light and Kanit-SemiBold. With the following lines, the fonts are included in the application:
QFontDatabase.addApplicationFont('styles/fonts/Kanit/Kanit-Light.ttf')
QFontDatabase.addApplicationFont('styles/fonts/Kanit/Kanit-SemiBold.ttf')
With QFontDatabase.applicationFontFamilies I can check my fonts and I can see they are imported correctly: 'Kanit Light', 'Kanit SemiBold'
In my styles.css file, I select the font with: font-family: Kanit;. This works fine when only one font-style within the same family is imported. However, when importing multiple font-styles, only the last added font is actually used in the application (in my case: SemiBold). How can I change between the fonts within a font-family?
I tried the following things (which were unsuccessful):
font-family: Kanit, Kanit Light; (with and without dash)font-family: Kanit; font: Light;font-family: Kanit; font: Kanit Light; (with and without dash)font-family: Kanit; font-style: Light;font-family: Kanit; font-style: Kanit Light; (with and without dash)The solution is to use font-family: Kanit; in your CSS. The downloaded fonts-styles (light & semibold in my case) have some properties (font-size, font-weight) that you can now access. For example, Kanit-Light enables access to font-weight: 100;, whereas SemiBold enables access to font-weight: 600;. For the Kanit font I use, you can find this info at: https://fonts.google.com/specimen/Kanit?query=kanit