Customer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Fonts

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

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

JavaScript
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

JavaScript
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

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

JavaScript
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