So after a bit of trial and error I got around to succesfully integrate typekit on Marketo.
Here are the necessary steps to do it:
Generate a new kit on typekit with the typefaces you need. Make sure you add the necessary domains to your typekit such as app-sj05.marketo.com; *.marketodesigner.com etc... and publish it.
YOU NEED TO ADD ALL THE DOMAINS OR ELSE THIS WON'T WORK AS TYPEKIT ONLY ALLOWS CONNECTIONS FROM "KNOWN WEBSITES".Copy the embed code from your typekit and put it at the top of you <head> in the HTML source of your landing page.
On the typekit Editor, click on "Using weights & styles in your CSS" and note the font-family, font-weight and font-style attributes
On the HTML source of your landing page, before #bodyID, declare your headers such as this:
h1 {
font-family: "aktiv-grotesk-std-i2","aktiv-grotesk-std",sans-serif;
font-style: italic;
font-weight: 200;
font-size: 48px;
text-align: left;
}
h2 {
font-family: "aktiv-grotesk-std-n7","aktiv-grotesk-std",sans-serif;
font-style: normal;
font-weight: 700;
font-size: 12px;
text-align: left;
}
h3 {
font-family: "aktiv-grotesk-std-n3","aktiv-grotesk-std",sans-serif;
font-style: normal;
font-weight: 300;
font-size: 12px;
text-align: center;
}
Once you're finished with your template, create a new landing page based on that template, drag a "rich text" box to your landing page and start typing. Once you're finished, go into HTML mode and apply to the beginning of what you want to be a Header 1 <h1> and at the end of the sentence </h1>
Repeat the process for headers 2 and 3.
Your text should display in your selected typekit typefaces.
.png)