> For the complete documentation index, see [llms.txt](https://docs.wisej.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wisej.com/docs/welcome/releases/whats-new-in-3.2/enhanced-font-support.md).

# 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="/files/7ejrm5jyUSufsjoD9vby" 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.wisej.com/docs/welcome/releases/whats-new-in-3.2/enhanced-font-support.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.