typekit and marketo integration tutorial | Community
Skip to main content
A
Anonymous
September 4, 2013
Question

typekit and marketo integration tutorial

  • September 4, 2013
  • 1 reply
  • 1038 views
Although I looked at this tutorial and read about typekit in Marketo Community, I still can't integrate the goodness of typekit in Marketo's awesomeness.

Would it be possible to create a step by step tutorial on how to integrate typekit fonts on Marketo landing pages?

I know it shouldn't be too hard and it would be SUPER helpful for everybody that tries to be "on-brand" as much as they possibly can.

Thank you!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

A
Anonymous
September 5, 2013
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.
Terms & ConditionsAccessibility statement

Loading footer...