If the font that you want to use on your page is from Adobe and it is not found in our default font library or the Google font library, then you can follow these instructions to add it to your page.
1. Create an Adobe Creative Cloud account if you do not have it already and go to https://fonts.adobe.com/.
With a free account, you get access to over 1000 fonts.
If you need a font that is not available for free, you can sign up for a paid subscription. All Adobe subscriptions come with access to Adobe Fonts, but if fonts are all you need, we recommend the InCopy subscription.
2. When you find the font that you want to use, click on View Family. This will take you to the font's page.
3. Click on Add to Web Project.
4. Enter the name of a new project or select an existing one, then click Save.
5. This will now open a window similar to the one in the screenshot below.
6. Navigate to the builder of the Instapage landing page that you want to add the font to, then copy and paste the code below into the HTML/CSS - Head section.
<!-- adobe typekit stylesheet goes here -->
<link rel="stylesheet" href="https://use.typekit.net/[YOUR CLIENT ADOBE ID HERE].css">
<style>
/* header font */
h1, h2, h3, h4, h5, h6 {
font-family: [FONT FAMILY NAME HERE], sans-serif !important;
}
/* body font */
body, div, p {
font-family: [FONT FAMILY NAME HERE], sans-serif !important;
}
/* links and buttons */
a {
font-family: [FONT FAMILY NAME HERE], sans-serif !important;
}
/*form buttons*/
.btn {
font-family: [FONT FAMILY NAME HERE], sans-serif !important;
}
</style>
7. Replace the link to the stylesheet with the one given by Adobe in step 5 so that your own client ID is in it.
8. Replace the font family name placeholder and the serif/sans-serif parts with the ones provided by Adobe in step 5.
9. Save the code, then save and update the page.
For additional information, you can also refer to Adobe's own guide on using fonts on webpages: https://helpx.adobe.com/fonts/using/add-fonts-website.html.
