NOTE: This article covers the guidelines for adding custom fonts and this feature is only available to Convert customers. If you have a specific font in mind that is not available in the Google library or our default selection in the builder, this guide will help you implement your desired custom font successfully.
Fonts are considered software, so whoever is using the software needs to buy a license for it. Instapage, as an outside contractor for our customers, needs font licenses for any type of project that implies custom fonts not included in Google Fonts. Keep in mind that when it comes to licensing, fonts are no different than any other kind of software.
1. In order to add the font, click on Assets and then on Fonts.
2. Next, click on the ADD NEW FONT button.
3. In the new window, add the Font family name, Font URL, and the Font weight.
The fonts should be added as font files linked directly from the hosting company or font foundry, as shown in the example below:
https://storage.googleapis.com/app-assets/1512500732_helveticaneuemedium.ttf
https://storage.googleapis.com/app-assets/1512500709_helveticaneuemedium.otf
Webfonts are hosted on the foundry servers and are offered under a paid subscription service. You might also have your fonts hosted on your servers.
The implemented fonts should have the following format: OTF, WOFF, TTF, or WOFF2.
Each webfont has a specified number of domains that are allowed usage. In this way, the foundry has the ability to track each font load.
4. After these have been added click on the SAVE button and you are all set.
5. Once you added the fonts, you can select them in the page editor and in the Fonts section under Styles. Changing the fonts in the Styles section will not affect existing pages, the fonts will be the default ones for new pages. You can choose from our default library, the Google library, and the fonts you added in the Fonts section below.
For old pages, the newly added custom font can be selected from inside the builder under Default fonts, as seen here: https://d.pr/5hJLsQ.
CORS & Whitelisting
Cross-Origin Resource Sharing (CORS) is an HTTP-header-based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit the loading of resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
What does this mean for you?
As fonts are subject to CORS, your IT team must whitelist our domains app.instapage.com and page-preview.instapage.com to ensure that the page builder will display the font. You will also need to whitelist the domains that the font will be used on.
After you have the font files linked directly from the hosting source and can confirm that the domains are whitelisted, the font can be added.