How do I set custom fonts from css in JavaFX? - css

Question

I have added a custom font to my project in the src/main/resources folder (RobotoMono.ttf). Then I try to load it from my css file like this:
#font-face {
font-family: 'RobotoMono';
src: url('RobotoMono.ttf');
}
but when I try to set this font to something it doesn't work:
.column-header-label {
-fx-label-padding: 0;
-fx-text-overrun: clip;
-fx-font-family: 'RobotoMono';
}
If I set the font to something which is present on my system I can see that the font changes but the one included by me does not work.
What am I doing wrong?

Answer 1

In your css, you have to specify a font-face with a url. Then, in your css element you have to use the name of the font from inside the ttf file, not the name of the font file itself. For instance, if you open the ttf file from Windows you see "Roboto Mono".
#font-face {
src: url('RobotoMono.ttf');
}
.column-header-label {
-fx-label-padding: 0;
-fx-text-overrun: clip;
-fx-font-family: 'Roboto Mono';
}

Answer 2

You declared where the font exists using the src property:
src: url('RobotoMono.ttf');
This is an instruction to look for RobotoMono.ttf in the same folder where the CSS file exists. If you created your JavaFX application using Maven, the style files should be in
src/main/resources/styles
So make sure the project's folder structure looks like:

Answer 3

just add the font to your java build path libraries
for example in eclipse you have to right click on the project->properties->java build path->add JARs and then add your ttf font.
after you have done this you need to just add the line below to your css
-fx-font-family: 'name of the font you have added to library without .tff';
make sure that your ttf font is inside the folder of your project