This article will detail how to load custom fonts into ZED if they are already hosted. If you cannot host custom fonts, please contact your Customer Success Manager.
In ZED, there is the option to use a custom font for text. The following steps should be taken in order to properly upload your own custom fonts:
- Each different font weight and style should have it's own file. For example, the following two declarations need to be split up into their own CSS files
- The URL path to each file must be the full URL (absolute).
Once you are ready to upload these into Zaius, select the Details tab of the text element and select Custom in the dropdown:
You'll be prompted to put in the URL to the CSS file and put in the font family name:
Once that is done for each file, you can use them in your template.
If you find that after uploading and selecting the font you don't see it being rendered properly in ZED, this may mean that app.zaius.com was not granted access. Here's how to check:
- Navigate to the campaign you're working with
- Open the console in Chrome (right click anywhere, select Inspect)
- Click the Network tab
- Select the font you've just uploaded in ZED (select it as if you're going to use it within ZED)
- In the 'Name' section of the Network tab, look for the font file. Once you find that, click on it, and then click to view 'Headers.' **
- Scroll to 'Response Headers and look for 'access-control-allow-origin.' This should contain 'app.zaius.com' or just an asterisk. If it does not, 'app.zaius.com' needs to be added to your site's CORS header.
**If you cannot find the font file that was uploaded, you should navigate to the 'Console' tab. There you should see errors that read along the lines of
'Access to Font at 'https://example.com/fonts/custom-font-italic' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
This means that a header wasn't specified, and step 6 needs to be followed.
Please contact email@example.com if you have any questions.