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-400.ttf (Normal)

• montserrat-700.ttf (Bold)

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.

Please note that when private custom fonts are loaded by the font system, it assumes they are loaded in order of weight. So using file names like montserrat-normal.ttf and monserrat-bold.ttf loads the fonts in the wrong order. You should rename the font files in order of weight, then define the sources in the theme assigning the correct attributes in the source declaration, as shown below.

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-400.ttf"]
            }]
        }   

These are the standard font weights:

100	Thin	The lightest weight.
200	Extra Light	Lighter than normal but thicker than thin.
300	Light	Thicker than extra light.
400	Normal	The default weight, often called "regular".
500	Medium	A weight between normal and bold.
600	Semi Bold	A weight between medium and bold, also called "demi bold".
700	Bold	A heavier weight than normal, used for emphasis.
800	Extra Bold	A very heavy weight, also called "ultra bold".
900	Black	The heaviest weight, used for a strong visual impact.

When using more weights than regular and bold, we recommend adding the weight to the name, like this:

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

You can use the variant weight ttf file instead of multiple files and define multiple weights. Make sure to verify in the browser that the ttf file is indeed a variable font.

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

Notice the "fontStyle": "bold" attributes. It indicates to the font system which font family matches the "bold" FontStyle.

Never change the font-family name, regardless of the name of ttf file. You must use the actual font family name without changes.