Search code examples
javascripthaxewebfonts

How to specify url to load font from?

I've noticed some examples that shows how to load a font from the current website being the base path for loading the font as:

Browser.document.fonts.load ("1em '" + font + "'").then (function (_) {
    promise.complete (this);
});

But how would I load from a specific URL rather than the website domain itself? Also, what does 1em mean?

edit

< style >
("1em url('https://lab-mywebsite.com.com/files/assets/fonts') ")
</style >
Solution

  • If you want to explicitly preload a font from a url, you should use the js.html.FontFace constructor directly:

    var url = "https://fonts.gstatic.com/s/indieflower/v8/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2";

new js.html.FontFace("Indie Flower", "url($url)").load()
    .then(function (loadedFace) { /* do something with the loaded font */ });

    For a working example, check out this Try Haxe fiddle.

    As far I understood the CSS Font Loading Module Level 3 draft, the FontFaceSet API – the one you access via document.fonts – gives you control over the loading of fonts already added to the default set (e.g. via stylesheets/<link> tags).

    You could check it out for more information on the interaction with CSS font loading and matching.