Requirements for adding custom fonts with our help

 

NOTE: This article refers to the requirements for adding custom fonts* with the help of our Implementation Services Team, an option exclusively available to our Converting customers. If you are on the Optimizing plan and would like to upgrade to benefit from this, you can contact us here. 

*If the font that you want to use is not found in the Google or Adobe libraries that we have included by default.

Fonts are considered software, so whoever is using the software needs to buy a license for it. Instapage, as outside contractors for our Converting customers, need font licenses for any type of project that implies custom fonts not included in either Google Fonts or Adobe Typekit font collections. Keep in mind that when it comes to licensing, fonts are no different than any other kind of software.

The fonts should be delivered as font files linked directly from the hosting company or font foundry, as shown in the example below:

font-face {
        font-family: "Helvetica Neue";
         src: url('https://storage.googleapis.com/app-assets/1512500732_helveticaneuemedium.ttf') format('truetype'),
         url("https://storage.googleapis.com/app-assets/1512500709_helveticaneuemedium.otf") format("opentype");
        font-weight: 500;
        font-style: normal;
}

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. We can accept these as well. Loading them on any page can be done by loading the font files as a direct font link.

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.

When using font files, all the files are uploaded on the most relevant hosting server to ensure proper and fast loading. The party that hosts and uses the font file needs to have a license for it. The font file license is not transmittable. 

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 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 (instapage.com and pagedemo.co) to ensure that the page builder will display the font.

After you have the font files linked directly from the hosting source and can confirm that the domains are whitelisted, please send an email to implementation@postclick.com in order to continue the process of adding the fonts to your workspace/account. Include the font files and confirmation for the whitelisting in the email.