The -fx-font-style
JavaFX CSS Property gives developers the opportunity to create italicized text, through access to a specific italic font. It roughly corresponds to the web CSS property font-style, although it does not support the entire CSS syntax.
Required parameters:
-fx-font-style
only needs one parameter, which should be defined from the allowed values
Parameter | Description | Value |
---|---|---|
<font-style> | The style of font to be rendered | [ normal | italic | oblique ] |
Behaviour
In web CSS, italic and oblique font styles are separate, and represent the following situations:
- Italic: A specific italicized font with dedicated italic glyphs
- Oblique: a geometric transformation of the regular font to create a synthetic slanted effect
In JavaFX, this is not supported. If an italic font style is available, both the italic and oblique keywords will select that style. If no italic font is available, it will not be synthesised and the font style will be rendered as normal.

Syntax
-fx-font-style: normal;
-fx-font-style: italic;
-fx-font-style: oblique;
The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.
The -fx-font-style
CSS property can have the following values:
Value | Description |
---|---|
normal | Text rendered with no italicisation |
italic | Render a specialised italic font, if available |
oblique | Render a specialised italic font, if available |
Example

CSS:
@font-face{
font-family: 'Droid Serif';
font-weight: 400;
src: url('../fonts/DroidSerif/DroidSerif-Regular.ttf') format('truetype');
}
@font-face{
font-family: 'Droid Serif';
font-weight: 400;
font-style: italic;
src: url('../fonts/DroidSerif/DroidSerif-Italic.ttf') format('truetype');
}
.root{
-fx-font-family: 'Droid Serif';
-fx-font-size: 18pt;
}
.title{
-fx-font-family: initial;
-fx-background-color: #fcc200;
-fx-font-weight: bold;
}
.normal{
-fx-font-style: normal;
}
.italic{
-fx-font-style: italic;
}
.oblique{
-fx-font-style: oblique;
}
FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox alignment="TOP_CENTER" prefHeight="250.0" prefWidth="475.0" stylesheets="@../css/styleStyles.css" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1">
<Label alignment="CENTER" maxWidth="800" styleClass="title" text="Font example" />
<GridPane alignment="CENTER_LEFT" vgap="10" hgap="10" VBox.vgrow="ALWAYS">
<Label text="Normal"/>
<Label styleClass="normal" text="abcdefghijklmnopqrstuvwxyz" GridPane.columnIndex="1"/>
<Label text="Italic" GridPane.rowIndex="1"/>
<Label styleClass="italic" text="abcdefghijklmnopqrstuvwxyz" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
<Label text="Oblique" GridPane.rowIndex="2"/>
<Label styleClass="oblique" text="abcdefghijklmnopqrstuvwxyz" GridPane.rowIndex="2" GridPane.columnIndex="1"/>
<rowConstraints>
<RowConstraints percentHeight="33"/>
<RowConstraints percentHeight="33"/>
<RowConstraints percentHeight="33"/>
</rowConstraints>
</GridPane>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</VBox>
See Also
- -fx-font
- -fx-font-size
-fx-font-weight