FX Experience Has Gone Read-Only

I've been maintaining FX Experience for a really long time now, and I love hearing from people who enjoy my weekly links roundup. One thing I've noticed recently is that maintaining two sites (FX Experience and JonathanGiles.net) takes more time than ideal, and splits the audience up. Therefore, FX Experience will become read-only for new blog posts, but weekly posts will continue to be published on JonathanGiles.net. If you follow @FXExperience on Twitter, I suggest you also follow @JonathanGiles. This is not the end - just a consolidation of my online presence to make my life a little easier!

tl;dr: Follow me on Twitter and check for the latest news on JonathanGiles.net.

Google has been kind enough to pull together a collection of great free fonts at http://www.google.com/webfonts. For ages I have wanted a easy way to use these in my JavaFX applications. This week I added basic support to JavaFX for CSS @font-face support (see RT-10343). It should be going into JDK 8-b69 which will be available later this week.

Hello @font-face

So all you need to now is go to Google Web Fonts site, find the font you want:

Google Web Fonts
Then click the “Quick-use” button
Quick Use button
That will take you to a page telling you steps to use that font in a web application. For JavaFX we need the address for the CSS file which is shown in the box in Step (3):
Quick use step 3
So once you have the address like “http://fonts.googleapis.com/css?family=Gafata” you can use it in your JavaFX application. Here is a simple application:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

public class HelloFontFace extends Application {
    @Override public void start(Stage primaryStage) {
        Label label = new Label("Hello @FontFace\n-- Gafata --");
        label.setStyle("-fx-font-family: Gafata; -fx-font-size: 80;");
        Scene scene = new Scene(label);
        scene.getStylesheets().add("http://fonts.googleapis.com/css?family=Gafata");
        primaryStage.setTitle("Hello @FontFace");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

The key lines here are:

scene.getStylesheets().add("http://fonts.googleapis.com/css?family=Gafata");

Which tells JavaFX to load the stylesheet from Google and add it to the scene’s available styles. The second line is:

label.setStyle("-fx-font-family: Gafata; -fx-font-size: 80;");

This sets the style of the label to use the loaded font by name and make the font size 80px. The result when you run it is:
Hello Gafata app
That is it, you are now using web fonts in JavaFX 🙂 You can also use them in cool ways along with the new rich text features of JavaFX 8 to create multi-line multi-style wrapping text like in the picture at the top of this post. The code for that is:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

public class CssFontFaceTest extends Application {
    @Override public void start(Stage primaryStage) {
        TextFlow flow = new TextFlow();
        flow.setPrefWidth(750);
        
        final Text t1 = new Text("Hello @FontFace - Grand Hotel.");
        t1.setStyle("-fx-font-family: 'Grand Hotel'; -fx-font-size: 80;");
        flow.getChildren().add(t1);
        
        final Text t2 = new Text("Hello @FontFace - New Rocker");
        t2.setStyle("-fx-font-family: 'New Rocker'; -fx-font-size: 80; -fx-fill: orange;");
        flow.getChildren().add(t2);
        
        Scene scene = new Scene(flow);
        scene.getStylesheets().add("http://fonts.googleapis.com/css?family=New+Rocker");
        scene.getStylesheets().add("http://fonts.googleapis.com/css?family=Grand+Hotel");
        
        primaryStage.setTitle("Hello @FontFace");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

You can see here we are loading two fonts, you can load as many as you like. So go have fun and enjoy creating great typography in your JavaFX apps.