View as Markdown
You’re viewing outdated documentation. View the latest Customer’s Canvas On-Premises documentation.

Custom Fonts

Applies to: Customer's Canvas On-Premises; Design Editor 4.4.25, 4.x (may differ) · Archived documentation

Customer's Canvas provides a Web API to update local fonts' info for the host web application. This API works based on HTTPS requests and is handled by the FontPreview controller (~/api/FontPreview). It has the following functionality:

Function Request type URL Description
Update local fonts' info POST ~/api/FontPreview/UpdateLocalFonts Notifies the host web application about updated local fonts.

If you upload new fonts into the host web application, you have two options to apply to them. The first option is to restart the ASP.NET application where Customer's Canvas is hosted to get the new fonts available in the font list. The second one is to use FontPreview API to reload font info at runtime.

Important

The snippet below defines 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 a form that updates local fonts' info. Replace example.com in baseURL with the domain name of your site.

HTML 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js">
    </script>
    <script language="javascript">
        var baseUrl = "https://example.com/SimplePolygraphy/api/FontPreview/UpdateLocalFonts";
        var apiKey = "UniqueSecurityKey";
             
        var updateLocalFonts = function() {
            $.ajax({
                url: baseUrl,
                type: "POST",
                headers: { "X-CustomersCanvasAPIKey": apiKey },
                processData: false,
                contentType: false
            }).done(function() {
                alert("Local fonts were updated successfully!");
            });
        }
    </script>
</head>
<body>
     <button type="button" onclick="updateLocalFonts()">Update local fonts</button>
</body>
</html>

See Also

Manual