[FIXED] Why JavaFX application and scene builder is showing garbled text?

Issue

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

Solution

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

Answered By - user7291698