JavaFX CSS font family doesn't get applied on Label control in Xubuntu 16.04

Question

Issue

Hi guys, I have setup the following JavaFX CSS to work on a Label control to display the sum-total of my calculator app.

.label-sumtotal {
  -fx-font-family: "Noto Sans CJK SC Bold", Arial, sans-serif;
  -fx-text-fill: color-crimson;
  -fx-font-size: 32pt;
  -fx-font-weight: bold;
}

This is how it looks correctly on Windows and Xubuntu 14.04

And this is how it looks incorrectly on Xubuntu 16.04

---

What I have tested so far on Xubuntu 16.04

• I change to another font-family that is included by Xubuntu 16.04, yet the Label still doesn't change its font-family nor its font-weight.

• But when I change the control from Label to Text without touching any of the CSS code, then somehow the font-family gets recognized and applied.

---

My Question

How can I make the Label control display the font-family on Xubuntu 16.04? I don't want to use Text control since it doesn't have certain formatting features as the Label.

Answer 1

I don't have an Ubuntu system, but you could try the following use of a Noto Sans SC Bold font loaded from the web, which worked for me on a Mac, to style a label. Output for me on a Mac was the same as the output which you say is correct on Windows and Xubunto 14.04.

Google web font reference for Noto Sans SC Bold:

• https://fonts.google.com/?query=noto+sans+sc&selection.family=Noto+Sans+SC:700

The solution is loading a web font from Google rather than relying on a pre-packaged font with the app or OS.

The version of the font being loaded from the web is specified as Noto+Sans+SC:700, so the typeface is already bolded, so I don't specify a bold weight in the css, instead I just specify a "Noto Sans SC Bold" value for -fx-font-family. You could still also have -fx-font-weight: bold;, then you would likely end up with a double-bolded font, once from the font itself, then again from the weight setting. It was necessary, in this instance for me to have the word "Bold" in the family otherwise it would not be found (which is contrary to Google's instructions for use of the web font in standard HTML CSS, which did not require "Bold" in the name).

You could also download the font as .ttc file from Google and load the font from a local resource using the solution specified at:

• How to embed .ttf fonts is JavaFx 2.2?

But, I was running a version of JavaFX earlier than the minimum required version of 9 for that feature to work, so I didn't try this with an embedded font.

I know that, likely, your Xubuntu system which is not correctly displaying the font must have it somewhere already (otherwise it wouldn't be able to display the font correctly when using Text rather than Label). But, I don't know how to get that to pick up the local OS font correctly for a Label in the case you described, which is why I suggest trying a webfont or embedded font instead.

Sample CSS

.label-sumtotal {
    -fx-font-family: "Noto Sans SC Bold";
    -fx-text-fill: crimson;
    -fx-font-size: 32pt;
}

Web Font Sample App

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class NotoFontApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Label label = new Label("5,40\u20AC");
        label.getStyleClass().add("label-sumtotal");

        Pane layout = new StackPane(label);
        layout.setPadding(new Insets(10));
        Scene scene = new Scene(layout);
        scene.getStylesheets().add(
                NotoFontApp.class.getResource("font.css").toURI().toURL().toExternalForm()
        );
        scene.getStylesheets().add(
                "https://fonts.googleapis.com/css?family=Noto+Sans+SC:700&display=swap"
        );

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}