Fonts
- 4 minutes to read
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 | 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 security model of Design Editor requires you to pass X-CustomersCanvasAPIKey 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 App
<!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