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

Fonts' Info

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

Starting from Customer's Canvas 5.2, you can use new fonts in the Design Editor as soon as you add them to the \assets\fonts folder. In earlier versions, you had to apply new fonts by either recycling your application pool or calling the UpdateLocalFonts method. 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 the FontPreview API to reload font info at runtime.

Customer's Canvas provides a Web API to update local fonts' info. 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 application about updating local fonts.
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.

The 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/cc/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