try
{
// Get the url for the font in the project files
const fontUrl = await runtime.assets.getProjectFileUrl("project-font-name-goes-here.woff2");
// Create a FontFace object. Make sure to use the correct font format, in this example it's "woff2"
const fontFace = new FontFace("ExampleFont", `url(${fontUrl}) format("woff2")`);
// Load the font
const font = await fontFace.load();
// Add the font to the document
document.fonts.add(font);
// Apply the fontFamily style to your input element
document.querySelector("#myInput").style.fontFamily = "ExampleFont";
}
catch (e)
{
console.log("something went wrong");
}
Instead of applying the style directly after loading the font, you could create a stylesheet in Project -> Files and then load it using the Load stylesheet action of the Browser Plugin.
The stylesheet would look something like this
#myInput{
font-family: "ExampleFont";
}
After the font is loaded, the style will take effect.
Here is an example project doing all of that. https://www.dropbox.com/s/gzy5zdkghp7w5yu/FontLoading.c3p?dl=0