Hey, I've been stuck on this problem for quite a w...

# tornadofx

[diniamo]

Hey, I've been stuck on this problem for quite a while now...
So I'm trying to add my custom fonts from resources, and I have this CSS code for adding them:

@font-face {
    -fx-font-family: "Poppins", poppins;
    -fx-font-weight: bold;
    src: url('../font/Poppins-Bold.ttf');
}
@font-face {
    -fx-font-family: "Poppins", poppins;
    -fx-font-weight: medium;
    src: url('../font/Poppins-Medium.ttf');
}
@font-face {
    -fx-font-family: "Poppins", poppins;
    -fx-font-weight: medium;
    -fx-font-style: italic;
    src: url('../font/Poppins-MediumItalic.ttf');
}

But when I tried to apply them it doesn't work. I mostly use medium and when I try to set the font-weight, on a label let's say I get this error:

main-view.css: Expected '<font-weight>' while parsing '-fx-font-weight' at [13,21]

I have found some StackOverflow questions, but none of the answers seem to have helped.

[Vladimir N.]

Does -fx-font-weight have medium property?

[diniamo]

It does, but I have also tried with 500px, and same issue.

[Vladimir N.]

Really? What JavaFx version you use?

[diniamo]

I followed the TornadoFX setup guide and I use jdk 11.

[Vladimir N.]

<font-weight> The font's weight, using the following syntax:
[ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]

[Vladimir N.]

https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/doc-files/cssref.html

[diniamo]

I see, but as I said, I tried 500px.

[Vladimir N.]

Did you use 500px string or just 500?

[diniamo]

I used 500px, because my ide recommended it.

[Vladimir N.]

I think you should use 500 without px

[diniamo]

So @Vladimir N. how do I fix this?

[Vladimir N.]

Can you try to replace medium to 500 ?

[Vladimir N.]

@font-face {
    -fx-font-family: "Poppins", poppins;
    -fx-font-weight: 500;
    -fx-font-style: italic;
    src: url('../font/Poppins-MediumItalic.ttf');
}

[diniamo]

Without px?

[diniamo]

Alright I'll try that when I get home.

[diniamo]

@Vladimir N. no errors now, that's good! But it seems like I'm just getting the regular version of the font rendered.

[diniamo]

Looking at my app in scenic view it says, it's using `System Bold`/`System Regular`as the font. Which is obviously not what I want.

[Samkeene]

@diniamo try this, I created a minimal example for you:

https://gist.github.com/SKeeneCode/313bcb6183193877f8a3e484581f74cf

[Samkeene]

Also I do like that font... might have to use it now in my applications :)

[diniamo]

@Samkeene I see, thanks! But I wanted to keep all the styling in css.

[Samkeene]

Are you not using tornadofx?

[Samkeene]

Nevertheless https://edencoding.com/resources/css_properties/fx-font-weight/ should be all you need if you want to remain pure css!

[diniamo]

I am using tornadofx, yes.

[diniamo]

Alright I tried doing that, didn't work, I'll make the repo public and send the link here, one second.

[diniamo]

https://github.com/diniamo/sm-pixel-art-creator
Here you go. It's still using System fonts.

[Samkeene]

What exactly did you try? Also, consider upgrading to javafx 16 and tornadofx2, as it may be something that was fixed in later versions.

[diniamo]

Well, you can look at the project for what I tried? And how exactly do I upgrade?

[Samkeene]

Well, you can upgrade javafx easy enough in your build gradle. You clone and build tornadofx2 yourself : https://github.com/edvin/tornadofx2 or get its snapshot release from sonotypes repo.

You haven't mentioned any css errors in the console so I'm assuming the fonts are loaded correctly. The other css properties you have in main-view.css such as border color and width are being correctly applied to the appropriate node right?

[Samkeene]

I cloned and built your project - the fonts will work if you move the @font-face declarations into the main-view.css - this isn't ideal, maybe its a quirk of javafx css that I am not aware..

[diniamo]

No errors, and yes the other stuff is getting applied.

[diniamo]

Moving it is not what I wanted, and I use the font in another css file.

[Samkeene]

using loadFont also works

[Samkeene]

Oh I finally figured it out

[Samkeene]

Always the silly things

[Samkeene]

your font-face declarations need to be the first thing in the css file, you have a root declaration above them. Move that under and it all works.

[diniamo]

Sounds stupid, but I'll try that.

[diniamo]

It works, thank you so much.