Using TypeKit in Landing Page Editor

[Anonymous]

We are re-designing our landing pages to include some cool fonts using TypeKit, but I am not sure that it is possible for us to be able to view these fonts while working in the LP editor? This makes it a bit annoying to align things, since the font in the LP editor is different from the one which will ultimately render in the browser.

Does anyone use custom fonts and know a possible workaround to this?

[Anonymous]

Erik,

I have used Typekit in the past and am currently working to implement Google web fonts. 

This solutoin is not ideal but one thing that I often do is code most of my landing pages in Adobe Dreamweaver so that I can see a decent preview.  Then I will drop in my code inside html blocks on the landing tool within Marketo.

For the Typekit or Google fonts javascript calls I typically set that up at the template level.

One thing to be aware of is some web based fonts can impact landing page load time.  If your web font style is pretty simple you should be okay though.

Hope that helps.
Patrick

[Anonymous]

Thanks Erik, good to know I'm on the same page as your marketing folks. Will work on the preview mode like you recommend. Thanks for your detective work!

[Anonymous · Accepted solution]

So, I talked to several folks and they run into the same issue you do, and get around it by using the preview function. Also, I think our layout might be a little more fault tollerant.

[Anonymous]

Yeah I knew that limitation, but with custom fonts being all the rage these days I thought there was an easier solution.

Hey I appreciate you taking a trip upstairs! Let me know what they say - thanks!

[Anonymous]

So, like I thought before, the issue is that the editor doesn't run Javascript. Preview should show it, so you don't have to approve it all the way.

I'll walk upstairs and chat with marketing on it too and see how they handle it.

[Anonymous]

I'm surprised, because I saw Marketo's website itself using non web-standard fonts....There has to be a way to create landing pages without the guess work. Or maybe someone at Marketo does what i do which is approve-&-Refresh

[Anonymous]

Sure, just one so far : http://ww2.verilogue.com/definitive-guide-to-dialogue-research.html

Like my theft of Marketo naming convention? 😉

[Anonymous]

Can you link to a page using it so I can look at the source?

[Anonymous]

Hi Erik. Yes, typekit works like a google fonts API. I do have the fonts installed on my PC however, so I was hoping to at least be able to edit the landing pages with the correct font being rendered. We are using our own fonts in h1,h2 and paragraph styles.

[Anonymous]

Hey Naor,

This isn't something I've played with much, so I'm not terribly familiar with how TypeKit is implemented. Is it some Javascript on the page and the renders the text differently?

I believe we don't execute Javascript in the editors, but we do in the previewers so that might be what is happening.

-Erik