---
title: "Fonts"
canonical: https://customerscanvas.com/docs/cc6/web-api-for-crud-operations-on-fonts.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Fonts

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
Customer's Canvas provides a Web API to manage fonts in the Design Editor. 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 |  GET |  `~/api/Fonts/{fontFolderPath}` |
 |  Download a font |  GET |  `~/api/Fonts/{fontFilePath}` |
 |  Upload fonts |  POST |  `~/api/Fonts/{fontFolderPath}` |
 |  Delete a font |  DELETE |  `~/api/Fonts/{fontFilePath}` |
 |  Delete a subfolder with fonts |  DELETE |  `~/api/Fonts/{fontFolderPath}` |
 
**Important** 
The snippets below define the [API security key](https://customerscanvas.com/docs/cc6/webapi.htm.md) 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/cc6/appsettings-config.htm.md).
 
```html
<!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
 
```
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.

```
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:
 
- ```
    Status Code: 403 Forbidden
    Content: Invalid Security Key
    ```
- ```
    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
 
```
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:
 
- ```
    Status Code: 200 OK
    Content-type: application/font-sfnt
    ```
- ```
    Status Code: 200 OK
    Content-type: application/font-woff
    ```
- ```
    Status Code: 200 OK
    Content-type: font/woff2
    ```

### Error Response
 
You can receive the following error responses:
 
- ```
    Status Code: 403 Forbidden
    Content: Invalid Security Key
    ```
- ```
    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
 
```
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:

```
Status Code: 200 OK
```
 
### Error Response
 
You can receive the following error responses:
 
- ```
    Status Code: 400 Bad Request
    Content: HTTP Request must contain at least one file.
    ```
- ```
    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.
 
```
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:
 
```
const baseURL = "https://localhost:44300/api/Fonts/Montserrat";
```
 
### Success Response
 
When the font has been successfully uploaded, this controller returns:

```
Status Code: 200 OK
```
 
### Error Response
 
You can receive the following error responses:
 
- ```
    Status Code: 403 Forbidden
    Content: Invalid Security Key
    ```
- ```
    Status Code: 404 Not Found
    ```
 
## See Also
  
### Manual
 
- [Custom Fonts](https://customerscanvas.com/docs/cc6/custom-fonts.htm.md)
- [Web API](https://customerscanvas.com/docs/cc6/webapi.htm.md)