Set font in javafx

Question

How to set font to a column in table view in java fx. I have a table with 3 columns and i want to set different fonts for each of the columns. Also, is it possible to change the font in runtime. Please help with some sample code.

Wad

Answer 1

Changing the table column style:

You should to use TableColumn#setCellFactory() to customize cell item rendering.
For example, datamodel with like this Person class:

// init code vs..
TableColumn firstNameCol = new TableColumn("First Name");
firstNameCol.setMinWidth(100);
firstNameCol.setCellValueFactory(new PropertyValueFactory<Person, String>("firstName"));
firstNameCol.setCellFactory(getCustomCellFactory("green"));

TableColumn lastNameCol = new TableColumn("Last Name");
lastNameCol.setMinWidth(100);
lastNameCol.setCellValueFactory(new PropertyValueFactory<Person, String>("lastName"));
lastNameCol.setCellFactory(getCustomCellFactory("red"));

table.setItems(data);
table.getColumns().addAll(firstNameCol, lastNameCol);

// scene create code vs..

and the common getCustomCellFactory() method:

private Callback<TableColumn<Person, String>, TableCell<Person, String>> getCustomCellFactory(final String color) {
        return new Callback<TableColumn<Person, String>, TableCell<Person, String>>() {

            @Override
            public TableCell<Person, String> call(TableColumn<Person, String> param) {
                TableCell<Person, String> cell = new TableCell<Person, String>() {

                    @Override
                    public void updateItem(final String item, boolean empty) {
                        if (item != null) {
                            setText(item);
                            setStyle("-fx-text-fill: " + color + ";");
                        }
                    }
                };
                return cell;
            }
        };
    }

Changing the table column header style:

TableView like other controls of JavaFX uses a built-in style sheet named caspian.css which is bundled with jfxrt.jar. See the answer of "JavaFX 2 and CSS classes".
To change the column font style you can either override the default style or customize it:
Overriding:

.table-view .column-header{
    -fx-text-fill: -fx-selection-bar-text;
    -fx-font-size: 16;
    -fx-font-family: "Arial";
}

Customizing:

#my-custom .table-view .column-header {
    -fx-text-fill: red;
    -fx-font-size: 26;
    -fx-font-family: "Arial";
}

Overriding effects all TableViews in app. So if you prefer to customize then once you define multiple styles, you can apply the custom style to any tableview at runtime as,

myTableView.setId("my-custom");
...
// Apply another style at runtime
myTableView.setId("my-custom2");

To see how to define and load style sheet files to app, check out the post of "JavaFX How to set scene background image".

However, applying different styles to different columns requires more effort I think.

Raffarty

Thanks for your reply. It was helpful. The above style applies for all column headers of the table. Is it possible to apply for each column. In your example .table-view .column-header{ } applies for all the column header. My question is what style (syntax) to specify that for column 1 use this stlye 1, column2 use style 2... . – Wad

I totally misunderstood your question my apologies :). Meanwhile I assume you have already done it but I edited my answer for future reference. – Raffarty

The current default CSS styling for JavaFX is modena.css starting with JavaFX 8, not caspian.css. – Aemia

Answer 2

you can use fxml or css file to set fonts color ......

 # .mainFxmlClass {
 -fx-font-family:nyala,Tahoma,Arial,Helvetica,sans-serif;   
 -fx-font-size:1.13em;  
 }

 .label{
 -fx-font-size:1.3em;
  }

and call and use .lable or .mainFxmlClass in the fxml file

Flapjack

Answer 3

what style (syntax) to specify that for column 1 use this stlye 1, column2 use style 2

Supply a custom cell factory which supplies cells to which you have applied styleclasses you have defined in css. The linked documentation contains examples which should provide you with enough information to achieve this.

Mamie