Typekit & Unbounce


#1

Has anyone used typekit generated fonts on their unbounce landing pages? Is such a thing even possible? If you have, can you pass on some tips before I try?

(For anyone who doesn’t know, typekit.com allows you to integrate some sick typography on your websites for an annual fee).


#2

Hi Peter -

I’ve tried it in the past and had very unpredictable results. the fonts would show up in the "preview’ but not when i published the page. i haven’t tried it in the past month or so, so i’m not sure if anything has changed recently.

i hacked away at it for days then gave up. hope this helps! jen


#3

As a fan of both services, I think this is something that TypeKit needs to arrange. That is, if if’s working on the preview site, it’s prolly not going to work on the actual domain. So IMHO TypeKit needs to enable viewing via the Unbounce domain as a gimme without “unbounce.com” counting as one of the licensed domains.


#4

Hey guys - this is definitely something we want to look into at some point in the future. I’ve added it to the queue (no promises on ETA) but thanks for sparking the conversation! We’ll be sure to keep this thread up to date with any news.


#5

Any progress here? I’d like this as well for brand consistency purposes.


#6

Hey Warren, no official update although I’m pretty sure it should work fine on published pages (although perhaps a bit finicky as Jen pointed out). We do have a good writeup on how to use Google Web Fonts with Unbounce if that’s any consolation in the meantime (although I’m fully aware they don’t have all the fonts that everyone wants/needs). I’ll see if we can run through a step-by-step guide similar to that google one for typekit instead…


#7

Hi

Just wondering whether this issue with typekit was resolved as I’m looking to try implement it in my landing pages.

If not, have any tutorials been published to add fonts ‘other than google fonts’ to the unbound landing pages.

Would be good to have a guide for adding fonts from another service that has a ‘fancier’ selection of fonts.

Cheers

Dave


#8

d


#9

Hey Dave - I had put up a solution that seemed to work but on closer inspection it didn’t. It looks like Typekit still doesn’t work quite right. I’ll be sure to update this thread if I can puzzle out a solution.

Cheers


#10

Any updates on typekit & unbounce?


#11

Great! Thanks Ryan! That’ll help out a lot of people :slight_smile:


#12

Thanks Ryan. Question: Since typekit fonts work on the domain name tied to your typekit account/license, do you have to have a subdomain name set up on your unbounce pages for it to work?


#13

*note: talked with a designer and he thinks this should take care of it


#14

Hey Matt, yes Ryan and I were just chatting and there is actually a step missing from the video above. You will need to tell Typekit about the domain you plan on publishing your unbounce page to, and then they’ll give you a bit of javascript that you paste into the “Scripts” of your landing page.

There is a bit of a sticky point when previewing though, as the preview page is on “app.unbounce.com”. If you want preview to work as well, you’d need to tell typekit about that domain too.

We plan on working out a better integration in the future, but hopefully you are able to get things working for the time being.


#15

Great, thank you


#16

Hey guys - just wanted to let you know that I rerecorded the video with all of the steps included this time. Should contain everything you need to set up TypeKit but let me know if you’ve got any questions.


#17

Hey Ryan,

Thanks for directing me from today’s webinar. Unfortunately I’ve encountered an issue. After applying the code outlined in the tutorial video (watched it twice) I get a blank webpage and not able to see able any page content in addition to the text box added with the applied Typekit fonts.

The only variation I can see from your tutorial is I use Unbounce as our main site (i.e. www.domainname.com). Therefore under Typekit’s Kit Settings I used www.vinoetic.com.

Any other thoughts on trouble shooting this one?

Thanks.
Todd


#18

Hey Todd - as you saw from my… uh… “demo” of adding Google Web Fonts, there can sometimes be small issues that prevent these things from working right.

Is www.vinotec.com the page you’re testing Type Kit with? If not, could you send me an email with a link to the page in question so I can dive in and see what’s up?

As an alternative, I’d also be glad to hop on Skype and screenshare so I can look in your TypeKit account too.


#19

Hi Ryan,

Just watched the video more closely for the 3rd time and discovered my issue. I neglected to include the forward slash in the closing style tag. (Me being a non-coder was showing through.)

I still have some question around applying the different font styles (i.e. weights) that were included in the typekit selections. Do I have to create a header style (i.e. h1, h2, h3, etc) for each font variation? Or can I manipulate the source code in the text box editor to apply the font weight desired? (Make sense?)

Thanks again for the assistance.
T


#20

Hey Todd - I totally missed your comment. I’m sorry it’s taken so long for me to get back to you. In TypeKit, you can choose which styles to add to the font library and then copy the CSS for that particular style.

For example, let’s say you wanted to use a handful of different weights. You would add those to your TypeKit library, then copy the CSS for that weight (they have a handy dialog that produces this for you) and update your CSS.

This lets you do things like assign a font weight of 400 to your h4 tags and a weight of 800 to your h1s.