# 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.

{% hint style="success" %}
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.
{% endhint %}

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.

<div align="left"><figure><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2FDB1FzbsQlCXNMFRbFqDt%2Fimage.png?alt=media&#x26;token=8dc5f51f-c070-458b-ae7a-fc477377985f" alt=""><figcaption></figcaption></figure></div>

This is the definition in the theme file:

```json
        "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"]
            }]
        }
```

{% hint style="info" %}
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.
{% endhint %}

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.

```json
 "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:

<table data-header-hidden><thead><tr><th width="94">Value</th><th width="146">Name</th><th>Description</th></tr></thead><tbody><tr><td>100</td><td>Thin</td><td>The lightest weight.</td></tr><tr><td>200</td><td>Extra Light</td><td>Lighter than normal but thicker than thin.</td></tr><tr><td>300</td><td>Light</td><td>Thicker than extra light.</td></tr><tr><td>400</td><td>Normal</td><td>The default weight, often called "regular".</td></tr><tr><td>500</td><td>Medium</td><td>A weight between normal and bold.</td></tr><tr><td>600</td><td>Semi Bold</td><td>A weight between medium and bold, also called "demi bold".</td></tr><tr><td>700</td><td>Bold</td><td>A heavier weight than normal, used for emphasis.</td></tr><tr><td>800</td><td>Extra Bold</td><td>A very heavy weight, also called "ultra bold".</td></tr><tr><td>900</td><td>Black</td><td>The heaviest weight, used for a strong visual impact.</td></tr></tbody></table>

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

```json
"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*.<br>

{% hint style="danger" %}
Never change the font-family name, regardless of the name of ttf file. You must use the actual font family name without changes.
{% endhint %}