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

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.

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.

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

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…

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

d

Hi Dave - If you use your own custom domain with Unbounce, you sure can use Typekit fonts. We don’t have a guide available yet but the following steps should get you up and running:

1. 
   

   Set up your Typekit account and add the domain your Unbounce landing pages will appear at.

   
   


2. 
   

   Embed the Typekit script into your landing page using the scripts dialog. For placement, choose head.

   
   


3. 
   

   Add the desired fonts to your kit and confirm your selector attributes. By default, Typekit creates a class selector that is the name of your font. For example, if you used the font Fertigo Pro Script , Typekit assigns the class selector “.tk-fertigo-script” for you. All text assigned that class on your landing page will have that font applied to it.

   
   


4. 
   

   Return to your Unbounce page and find the text you want to apply this font to. You’ll have to give that text the class from the step above. To do this, double click your text to open it in the text editor. Click the Source button and wrap your text in the following tags: YOUR TEXT HERE Be sure to replace the class selector with whatever your class selector is.

   
   

That’s it!

I hope these instructions make sense despite all the CSS lingo. Once you republish your page the Typekit fonts should work.

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

Any updates on typekit & unbounce?

Hey Matt (and everyone) - I’m glad to say that not only does it work, it’s super simple to set up. I put together a screencast that demonstrates how you can do it:

http://embed.vidyard.com/share/8q3PbL…

Hope that helps!

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

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?

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

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.

Great, thank you

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.

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

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.

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

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.

Hey everyone, just an update on web fonts. I know this thread was originally requesting Typekit, but we have just launched support for 20 Google Web Fonts in our beta editor. You can see the list of 20 fonts here:

http://unbouncepages.com/google-web-f…

Any dropdown menu that lists font selection (text, buttons, form labels) will have these additional 20 options available. Hope that helps some of you!

Hi Everyone,

In my case, i bought a license to a very specific font (client’s brand related) from Linotype fonts.

Its a javascripted called font but it requires me to place a fonts folder in my server. Can support help with information on how to do that since my pages are published in unbounce server?

Hi Thiago - We don’t support @font face natively as there’s no way to upload your fonts over to unbounces servers. That being said you could still implement font face to your landing pages. Take a look at the guide below you might find it helpful in what your trying to achieve

http://sixrevisions.com/css/font-face…

Combining the link above with a something like Font squirrel should be do the trick.

http://www.fontsquirrel.com/

Hope that helps!

Please make importing fonts as easy as everything else. This is the only feature holding me back from creating the page I need.

Thanks guys