You can use Adobe Typekit fonts in ONTRApages, so you can keep your designer and your ONTRApages.
This is an advanced technique, but if you follow it step by step even snooty designers should be able to do it. We recommend you complete the design of your page using the built in fonts, then make a copy of it to test this technique, rather than testing on a live page. Once you have it dailed in you can add it to your live page.
Typekit fonts can be used to replace all ONTRApages fonts with the exception of the Body Text and Large Body Text fonts. Follow these steps to add Adobe Typekit fonts to your ONTRApage.
1). Design your page first in the ONTRApages Editor, publish it, and keep it open in one tab.
2). In another tab, sign up for a Typekit account at https://typekit.com, if necessary, and log into Typekit.
3). In the Typekit application, create a Typekit “Kit” using the published URL of your ONTRApage. The Kit will provide the embed code for your ONTRApage.
4). Copy the embed code and paste it into the ONTRApages Custom Header Code section on the Settings tab.
5). Click the Publish button to save the code and publish it to your page!
6). Back in Adobe TypeKit, add a font family to the Kit.
7). Typekit displays the “Welcome! Here’s how to use fonts …” dialog box.
8). At the top left, add the CSS selectors for this font. Use “triple notation” as shown in the image below. In the image, we have all the CSS selectors available listed, but you will only use the ones you want replaced, like the Header 1 or Header 2 font. Most ONTRApages have the following CSS selectors available:
- Header 1: .h1.h1.h1
- Header 2: .h2.h2.h2
- Header 3: .h3.h3.h3
- Label: .label.label.label
- Button: .button.button.button
- Quote: .blockquote.blockquote.blockquote
9). Click the Publish button at the lower right of the Kit Settings.
10). Visit your published ONTRApage to verify the font substitution is working correctly. You may need to refresh the page.
Note: The ONTRApages editor will still show the default font on the Canvas. The font substitution happens as the page is rendered so you must view your changes on the published page.