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}
|
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.
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.
<!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>
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.
This method takes the optional parameter includeSubfolders, which allows you to list fonts in subfolders. Its default value is false.
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) );
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"
}
]
}
You can receive the following error responses:
Status Code: 403 Forbidden Content: Invalid Security Key
Status Code: 404 Not Found
You can use the ~/api/Fonts/{fontFilePath} URL to download a font from /assets/fonts/. This request outputs a font to a stream.
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) );
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
You can receive the following error responses:
Status Code: 403 Forbidden Content: Invalid Security Key
Status Code: 404 Not Found
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/.
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.");
});
When the fonts have been successfully uploaded, this controller returns:
Status Code: 200 OK
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
This controller allows you to delete a single font as well as a whole subfolder in the /assets/fonts/ folder.
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";
When the font has been successfully uploaded, this controller returns:
Status Code: 200 OK
You can receive the following error responses:
Status Code: 403 Forbidden Content: Invalid Security Key
Status Code: 404 Not Found