Enhanced Font Support

Font support has been enhanced in the JavaScript layer as well as the server side .NET layer in Wisej.NET 3.2. Now we support using theme fonts that are not installed on the server and can load all the different variations for a font family.

Private Fonts

To support private fonts, simply deploy the .ttf files for the fonts used in the theme that are not installed on the server to the 📂/Themes/Fonts folder. For example, in case your application uses the Montserrat font and it's not installed on the server, put the following files in /Themes/Fonts:

• montserrat-bold.ttf

• montserrat-bolditalic.ttf

• montserrat-italic.ttf

• montserrat-regular.ttf

Wisej.NET will load all the montserrat-*.ttf files in a private Montserrat family and use it at runtime for autosizing and layout calculations.

This new feature is particularly useful when deploying to Azure App Services or other providers that don't allow you to install custom fonts on the servers.

Font CSS Rules

Font sources added to a theme now support specifying the font-style and font-weight properties. It allows a font family in the theme to use different sources (woff, woff2, ttf, etc.) for different styles and weights.

Until now Wisej.NET supported only the "normal" source and let the browser render the different styles and weights.

This is the definition in the theme file:

        "default": {
            "size": 13,
            "family": ["Open Sans"],
            "weight": 400,
            "sources": [{
                "fontWeight": "400",
                "fontStyle": "normal",
                "version": "1.2.3.4",
                "family": "Open Sans",
                "source": ["https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4k.woff"]
            }]
        }

Note the "version":"1.2.3.4" optional property. It allows the theme to add a custom "version" argument to the source URLs to force reloading the font from a URL that may be cached.

You can also reuse the same .tff files deployed in /Themes/Fonts in the sources for the font definition in the theme or theme mixin.

 "default": {
            "size": 13,
            "family": ["Montserrat"],
            "weight": 400,
            "sources": [{
                "fontWeight": "400",
                "fontStyle": "normal",
                "version": "1.2.3.4",
                "family": "Montserrat",
                "source": ["/Themes/Fonts/montserrat-regular.ttf"]
            }]
        }