CODEWITHSUNDEEP
cssjavafxfontsfxmljavafx-11
Fuzail
Fuzail

Reputation: 413

Embedding multiple font files in JavaFX CSS (Regular, Bold etc)

I am working on the UI design of my JavaFX application and i need to assign an -fx-font-family inside the .root CSS class which applies basically everywhere with which this stylesheet is applied. I am required to apply "Roboto" font family (external font) to the whole application. upon downloading the font family, i came to know that the it consists of a bunch of .ttf files which look like this:

enter image description here

I've embedded a single font like this:

@font-face {
  src: url("font/Roboto-Regular.ttf");
}
.root {
-fx-font-family:"Roboto";
...
}

which works just fine however it does not apply to the bold Label (text) in my application which i think requires the "Roboto-Bold.ttf" font-file. How do i embed this font family throughout the app so that any label i create whether Regular or Bold has this font applied to it. Do i have to import multiple font files (if yes, how?) or create CSS classes for Regular/Bold fonts and apply to every single label (which seems unnecessary) or is there supposed to be single font file? I hope my question is clear.

Upvotes: 2

Views: 845

Answers (1)

Josue Garcia
Josue Garcia

Reputation: 11

I had the same problem, I solved adding the -fx-font-weight property to the CSS rule. I leave my example, I hope this works out with you too.

@font-face {
    src: url('fonts/Roboto-Bold.ttf');
}


.headertitle {
    -fx-font-family: "Roboto";
    -fx-font-size: 20pt;
    **-fx-font-weight: 700;**
    -fx-text-alignment: left;
    -fx-text-fill: #FFFFFF;
}

Upvotes: 1

Related Questions