Why JavaFX application and scene builder is showing garbled text?

Question

Here's how my scene builder looks like:

and here's the GUI:

The standalone scene builder:

I just run the following source code from Java SDK demos:

package sample;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Button;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        Button btn = new Button();
        btn.setText("Say 'Hello World'!");
        StackPane root_ctn = new StackPane();
        root_ctn.getChildren().add(btn);
        btn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                System.out.println("Hello World!");
            }
        });
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root_ctn, 300, 275));
        primaryStage.show();
    }


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

The only place the text looks good is in the console.

View idea.log

Answer 1

I did not yet find out the solution, but I found an interesting pattern: On your Gluon Scene Builder screenshot, there is written Pgy Rtqlgev, where it should be New Project, and Qrgp Rtqlgev where it should be Open Project. Note that every letter is substituted by the after next letter in the alphabet!

The same applies to Say 'Hello World'!, which is "translated" to Lc{ 'Jgrrq Yqtrf'!. Note that the letter y is replaced by a {, which comes two positions after y in the ASCII table. Interestingly, the characters ' and ! stay the same..

The space each letter takes is still the space of the correct letter, as you can see in the following graphic with the correct text on the green background:

Update: Is it possible that the font "Segoe UI" is missing or flawed on your system? Can you use that font for example in Word?

Update: I found two other questions of users facing the same problem. In both cases the problem seems to be related to the Segoe UI font:

Scene Builder Editor displaying weird characters

JavaFX Scene builder shows wired characters

Answer 2

I have also encountered this problem and after reading many forums I think I have a possible explanation and solution. The problem seems to be related to Mac users and Segoe UI;

I am guessing that because the font is used in Microsoft products, Macs are unable to render the font, even downloaded versions have not worked.

The simplest fix, which has worked for me so far, is to include style="-fx-font-family: serif" in the root node or add it in the controller or add

.root{
  -fx-font-family: serif
}

to your CSS. This works for any font in your system.

Answer 3

Installing Segoe UI was a huge red herring for me. Instead, I changed the version of javafx defined in build.gradle to 17.0.1 and upgraded JavaFX to 16