---
title: "Fonts | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/apis/fonts/"
---

# Fonts

> Design Editor provides a Web API to manage fonts. This API works based on HTTPS requests and is handled by the `Fonts` controller (**~/api/Fonts**). This controller implements the following CRUD operations on fonts:

| Function | Request type | URL |
| :--- | :--- | :--- |
| [Get a font list](#getting-a-font-list) | GET | **~/api/Fonts/{fontFolderPath}** |
| [Download a font](#downloading-a-font) | GET | **~/api/Fonts/{fontFilePath}** |
| [Upload fonts](#uploading-fonts) | POST | **~/api/Fonts/{fontFolderPath}** |
| [Delete a font](#deleting-fonts) | DELETE | **~/api/Fonts/{fontFilePath}** |
| [Delete a subfolder with fonts](#deleting-fonts) | DELETE | **~/api/Fonts/{fontFolderPath}** |

:::important
The security model of Design Editor requires you to pass [`X-CustomersCanvasAPIKey`](https://customerscanvas.com/docs/on-premises/design-editor/apis/auth.md) in request headers. The snippets below define the API security key in JavaScript code. It could be highly insecure if it runs on a public site. However, you can use it this way in your admin panel, or just for demonstration purposes.
:::

## Sample

The following snippet displays how you can get a list of available fonts in the Design Editor. To make this sample work, replace **example.com** in `baseURL` with the domain name of your site and specify the same `apiKey` as you defined in [AppSettings.config](https://customerscanvas.com/docs/on-premises/design-editor/it-ops/config-backend/appsettings.md#ApiSecurityKey).

```html title="Sample"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fonts Controller Sample</title>
    <script type="text/ecmascript">
        // Set a link to the Fonts controller.
        const baseURL = "https://example.com/api/Fonts";
        // Set a unique key for using the Web API.
        const apiKey = "UniqueSecurityKey";
        // Define a function for obtaining a font list.
        var getFontList = function() {

            // Make the request.
            fetch(baseURL, {
                method: "GET",
                headers: { "X-CustomersCanvasAPIKey": apiKey }
            })
            // Process the response.
            .then( response => console.log(response.json()) )
            .catch( error => console.error(error) );
        }
    </script>
</head>

<body>
    <h3>Get the Font List</h3>
    <input type="button" value="Get" onclick="getFontList()" />
</body>
</html>
```

## Getting a Font List

You can use the **`~/api/Fonts/{fontFolderPath}`** URL to obtain the name, Postscript name, style, and family name of fonts uploaded to the **/assets/fonts/** folder. This request also returns a list of subfolders. If you specify the `fontFolderPath`, you can list fonts in the corresponding subfolder.

### URL Parameters

This method takes the optional parameter `includeSubfolders`, which allows you to list fonts in subfolders. Its default value is `false`.

### Request Example

```js title="Getting a Font List"
fetch("https://localhost:44300/api/Fonts?includeSubfolders=true", {
    method: "GET",
    headers: { "X-CustomersCanvasAPIKey": "UniqueSecurityKey" }
})
.then( response => console.log(response.json()) )
.catch( error => console.error(error) );
```

### Success Response

For example, you can get the following response if the **Montserrat** subfolder and the **Bebas Neue Bold** font are in the **/assets/fonts/** folder.

```text
Status Code: 200 OK
Content:
{
  "name": "",
  "path": "",
  "folders": [
    {
      "name": "Montserrat",
      "path": "Montserrat"
    }
  ],
  "items": [
    {
      "postScriptName": "BebasNeueBold",
      "style": "Bold",
      "family": "Bebas Neue",
      "fullName": "Bebas Neue Bold",
      "path": "BebasNeue Bold.otf"
    }
  ]
}
```

### Error Response

You can receive the following error responses:

-   ```text
    Status Code: 403 Forbidden
    Content: Invalid Security Key
    ```

-   ```text
    Status Code: 404 Not Found
    ```

## Downloading a Font

You can use the **`~/api/Fonts/{fontFilePath}`** URL to download a font from **/assets/fonts/**. This request outputs a font to a stream.

### Request Example

```js title="Downloading a Font"
fetch("https://localhost:44300/api/Fonts/Roboto-regular.woff", {
    method: "GET",
    headers: { "X-CustomersCanvasAPIKey": "UniqueSecurityKey" }
})
.then( response => {
    if (response.ok) {
        console.log("The font was downloaded successfully.");
        console.log(response.url);
    }
})
.catch( error => console.error(error) );
```

### Success Response

If the result is successful, this API returns a file stream:

-   ```text
    Status Code: 200 OK
    Content-type: application/font-sfnt
    ```

-   ```text
    Status Code: 200 OK
    Content-type: application/font-woff
    ```

-   ```text
    Status Code: 200 OK
    Content-type: font/woff2
    ```

### Error Response

You can receive the following error responses:

-   ```text
    Status Code: 403 Forbidden
    Content: Invalid Security Key
    ```

-   ```text
    Status Code: 404 Not Found
    ```

## Uploading Fonts

When uploading fonts, this controller creates a folder specified in the request URL **`~/api/Fonts/{fontFolderPath}`** and uploads your fonts to this new folder. You can omit the `fontFolderPath` parameter to upload new fonts to **/assets/fonts/**.

### Request Example

```js title="Uploading Fonts"
var data = new FormData(document.getElementById("fonts_to_upload"));
fetch("https://localhost:44300/api/Fonts", {
    method: "POST",
    body: data,
    headers: { "X-CustomersCanvasAPIKey": "UniqueSecurityKey" }
})
.then( response => {
    if (response.ok)
        console.log("The font was uploaded.");
    else
        console.log("Failed to upload the font.");
});
```

### Success Response

When the fonts have been successfully uploaded, this controller returns:

```text
Status Code: 200 OK
```

### Error Response

You can receive the following error responses:

-   ```text
    Status Code: 400 Bad Request
    Content: HTTP Request must contain at least one file.
    ```

-   ```text
    Status Code: 403 Forbidden
    Content: Invalid Security Key
    ```

## Deleting Fonts

This controller allows you to delete a single font as well as a whole subfolder in the **/assets/fonts/** folder.

### Request Example

To delete a font from the Design Editor, you can make the following request.

```js title="Deleting Fonts"
const baseURL = "https://localhost:44300/api/Fonts/Montserrat/Montserrat-ExtraThin.ttf";
fetch(baseURL, {
    method: "DELETE",
    headers: { "X-CustomersCanvasAPIKey": apiKey }
})
.then( response => {
    if (response.ok)
        console.log("The font was deleted.");
    else
        console.log("Failed to delete the font.");
})
```

If you need to delete the whole folder **Montserrat**, change `baseURL` in this request as follows:

```js title="Deleting Font Subfolder"
const baseURL = "https://localhost:44300/api/Fonts/Montserrat";
```

### Success Response

When the font has been successfully uploaded, this controller returns:

```text
Status Code: 200 OK
```

### Error Response

You can receive the following error responses:

-   ```text
    Status Code: 403 Forbidden
    Content: Invalid Security Key
    ```

-   ```text
    Status Code: 404 Not Found
    ```