How to use typekit fonts in Unbounce


#1

I’m having trouble finding any documentation on how to get tyepkit font’s working in unbounce. Is there any info out there?

I’ve added the javascript and added some custom stylesheet’s but it isn’t rendering them in preview mode. Is there something I am missing.

Perhaps my domains are wrong (do I use unbounce domain?) or I am missing some other stylesheet info that’s needed?


#2

Figured it out. Had the wrong domain set up. Ooops!


#3

You solved this one pretty quickly, @Brad_J! Glad to hear you got it figured out. :slight_smile:


#4

On a similar topic, is there a way to see your fonts render in edit mode? I have all the css styles set up etc but they don’t show up in the style properties menu. Makes it a little more challenging to see how things will render, without having to manually apply sizes.

I’m not really concerned about having the font family load but it would be nice if your css styles for headers/paragraphs for sizes/line-heights/font-weights would override the the properties/styles in edit mode.


#5

Hi @Brad_J,

Technically speaking it would be pretty hard to display the proper 3rd party fonts in the editor.

Simply because their execution is tied to a specific domain. At the same time, while in the editor, your page isn’t really published and therefore can’t execute scripts.

Security wise, executing scripts in the editor can open up a whole other can of worms.

My advice: Once you build a few pages, you start to get a pretty good feeling of what would go where.
Especially, if you are building your page based on a Photoshop/Sketch design. The design file would have all the necessary information for you to apply it through the editor.

You can always publish your page and adjusted it until it’s perfect.

Best,
Hristian


#6

Yeah, I understand the script issues. I think where I getting frustrated was even though I added custom css styles for H1 and P tags they weren’t being reflected in the editors style properties. Rendering the font isn’t really the issue, I would just like a closer approximation the the styles I put in the stylesheet.

As far as I could tell I couldn’t adjust the editors property styles to reflect what I had used for css. So I would apply my h1 in the editor but it wouldn’t match font sizes and line heights to what I had in my css. So to get a better sense of how the font sizes were I had to manually enter the values in the editor below the styles, but that would just insert inline CSS into the text area.

Maybe I’m missing a place or area to set those basic font dropdown styles h1,h2,h3, etc in the editor.


#7

I’m also struggling with Typekit - I just don’t know what steps I need to take and in what order to get the typeface working on my landing page. Did you end up finding a step-by-step guide for getting typekit to work?