Custom Fonts in JS UWP

Question

How would I add a custom font to a Universal Windows App that is using javascript?

I put my fonts in a new folder /fonts/, and I used the CSS @font-face to add the font

@font-face {
    font-family: "Montserrat";
    src: url("../font/Montserrat-Regular.ttf");
}

but when I compile the application, it gives the errors:

The app couldn’t resolve ms-appx://817ec616-2c4f-44b6-aa98-2108aca6a18a/lib/fonts/Montserrat-Regular.ttf because of this error: DATA_NOT_AVAILABLE.

and @font-face failed cross-origin request. Resource access is restricted.

Would this error be because of something in Visual Studio?

Answer 1

This could be if you are referring to a CSS file hosted on the web and not in the app package. This would explain the cross origin issue. If that's the case then specify the absolute path for the URI. Or, better still, include the ttf file in the package.

Custom fonts work fine for me when include in the package.

If that's not it try a different file just to check it's not a problem with a specific file.