Home/ Questions/Q 8185373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T01:49:32+00:00

The web page uses a custom font which is not installed on my PC.

  • 0

The web page uses a custom font which is not installed on my PC. In such case, WebView seems to use the default font of the operation system.

But I have the font file “xx.ttf”. How can I embed the font into my application and tell WebView to use it to identify the font on the page?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Load the font:

    Font.loadFont(
  CustomFontWebView.class.getResource("TRON.TTF").toExternalForm(), 
  10
);

    before you use it in the WebView:

    style='font-family:"TRON"';

    Here is a complete example.
    The example relies on a TRON.TTF font which you can download from dafont.
    Once you have downloaded the TRON.TTF font, place it in the same directory as CustomFontWebView.java and ensure that your build system copies the TRON.TTF file to the class output directory.

    import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

// demonstrates the use of a custom font in a WebView.
public class CustomFontWebView 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(
      CustomFontWebView.class.getResource("TRON.TTF").toExternalForm(), 
      10
    );

    // use the tron font in a WebView.
    WebView webView = new WebView();
    webView.getEngine().loadContent(
      "<body bgcolor='silver'>" +   
        "<div align='center'>" +   
          "<p style='font-family:'TRON'; font-size:20;'>" +                 "TRON" + 
          "</p>" +
          "<img src='http://ia.media-imdb.com/images/M/MV5BMTY5NjM2MjAwOV5BMl5BanBnXkFtZTYwMTgyMzA5.V1.SY317.jpg' width='259' height='457'/>" + 
          "<p style='font-family:'TRON'; font-size:10;'>" + 
            "A sci-fi flick set in an alternate reality." + 
          "</p>" +
        "</div>" +   
      "</body>"
    );

    // layout the scene.
    final Scene scene = new Scene(webView, 400, 575);
    stage.setScene(scene);
    stage.show();
  }
}

    tron

    On use of the Microsoft YaHei font specifically

    Microsoft YaHei works fine for me (Windows 7). My Win7 install comes with the font (and it can’t be removed), so it doesn’t need to be explicitly loaded – just reference the correct font family from your html and it will just work for such a Win7 install. I have a standard US edition of Win7 Pro, not a Chinese version. I did copy the msyh.ttf file from my windows/fonts directory into my project and load it via JavaFX just to make sure the loading via JavaFX works and that also worked fine. The font-family I used to set the html style css font-family specifier was “Microsoft YaHei” (instead of TRON used in the above answer example). The text I displayed to test it was 微软雅黑 and I compared the rendered text by the JavaFX app against the same text rendered in WordPad with Microsoft YaHei selected and the glyphs were identical.

    Note that with JavaFX 3.0 is seems you will be able to use the css @font-face mechanism, which means you could declare the font reference in the web page’s css rather than in Java code as I did in the above example. Here is a link to the relevant jira issue to track progress on implementation of this feature.

    • 0