[FIXED] How to embed .ttf fonts in JavaFx 2.2?

Issue

Firstly, I am quite a new guy in coding. I need to embed a font in my java FXML-based app and don't know how to do it. I have pasted the font, fontName.ttf in a "resources" folder in the root of the sources of my project, ie App/src/app/resources. I have set the CSS for the component (text) as

#text {
    -fx-font-family: url(resources/fontName.ttf);
}

I have also tried adding inverted commas in the url, ie url("resources/fontName.ttf");, but it doesn't work. I have also set the CSS id for the component, so that can't be the problem. Is there any other working way to do so? I have seen http://fxexperience.com/2010/05/how-to-embed-fonts/, but it doesn't work since I have JDK 1.7 u21. Any ideas for a correct way to embed fonts?

Solution

Solution Approach

I updated the sample from Javafx How to display custom font in webview? to demonstrate using a custom true-type font in JavaFX controls styled using CSS.

Key points are:

1. Place the font in the same location as your application class and ensure your build system places it in your binary build package (e.g. application jar file).
2. Load the code font in your JavaFX code before you apply a style which uses it. Font.loadFont(CustomFontApp.class.getResource("TRON.TTF").toExternalForm(), 10);
3. To use the custom font in a style class use the -fx-font-family css attribute and just reference the name of the font (e.g. in this case "TRON").
4. Create and load a stylesheet which defines the style classes.
5. Apply style classes to your controls.

Additional Information

If you are using Java 8, you may be interested in Use web(Google) fonts in JavaFX.

Font Collections

If your font file is in .ttc format, containing multiple fonts in a single file, then use the Font.loadFonts API (instead of Font.loadFont). Note that Font.loadFonts is only available since JDK 9 and is not available in earlier releases.

Sample Output Using a Custom Font

Sample Code

The example relies on a TRON.TTF font which you can download from dafont.

CustomFontApp.java

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.*;
import javafx.scene.layout.VBox;
import javafx.scene.text.*;
import javafx.stage.Stage;

// demonstrates the use of a custom font.
public class CustomFontApp extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    stage.setTitle("TRON Synopsis");

    // load the tron font.
    Font.loadFont(
      CustomFontApp.class.getResource("TRON.TTF").toExternalForm(), 
      10
    );

    Label title = new Label("TRON");
    title.getStyleClass().add("title");

    Label caption = new Label("A sci-fi flick set in an alternate reality.");
    caption.getStyleClass().add("caption");
    caption.setMaxWidth(220);
    caption.setWrapText(true);
    caption.setTextAlignment(TextAlignment.CENTER);

    VBox layout = new VBox(10);
    layout.setStyle("-fx-padding: 20px; -fx-background-color: silver");
    layout.setAlignment(Pos.CENTER);
    layout.getChildren().setAll(
      title,
      new ImageView(
        new Image(
          "http://ia.media-imdb.com/images/M/MV5BMTY5NjM2MjAwOV5BMl5BanBnXkFtZTYwMTgyMzA5.V1.SY317.jpg"
        )
      ),
      caption
    );

    // layout the scene.
    final Scene scene = new Scene(layout);
    scene.getStylesheets().add(getClass().getResource("custom-font-styles.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
  }
}

custom-font-styles.css

/** file: custom-font-styles.css
 * Place in same directory as CustomFontApp.java 
 */

.title {
    -fx-font-family: "TRON";
    -fx-font-size: 20;
}

.caption {
    -fx-font-family: "TRON";
    -fx-font-size: 10;
}

On FXML Usage

Font.loadFont(url, size) is a static method taking two parameters. I don't think you can invoke font.loadFont from FXML and wouldn't advise it if you could. Instead, load the font in Java code (as I have done in my answer) before you load your FXML or style sheet which requires the font.

Answered By - jewelsea
Answer Checked By - David Marino (JavaFixing Volunteer)