Adobe TypeKit Fonts for ONTRApages? [closed]

My snooty designer insists he should hard code all the pages so we can use these Adobe Typekit fonts he has in his Creative Cloud subscription to, and I quote, "create a dynamic, consistent look and feel for better branding and longer life" (or something like that).

I really like ONTRApages, and I kinda like this designer guy when we're talking about football. Do I need to fire him or can we use Adobe TypeKit fonts in ONTRApages.

edit retag flag offensive reopen merge delete

Closed for the following reason duplicate question by Frank
close date 2016-11-21 12:00:32.095503

1 answer

Sort by » oldest newest most voted

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!

image description

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

image description

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.

edit flag offensive delete publish link more

Question Tools

1 follower


Asked: 2016-04-20 07:11:51 -0700

Seen: 56 times

Last updated: Apr 20 '16