Using Adobe Typekit Fonts on Your Landing Page

Follow

Note:

Are you a beginner or have very little stylesheet experience? You can easily access a library of hundreds of Google fonts from directly within the Unbounce Builder without using any special code! Check out our Google Fonts documentation for more information.

Adobe has great instructions on how to choose custom fonts to use on your personal website in their own documentation.

Head on over to Adobe to choose the custom fonts you’d like added, then follow the instructions below to add those fonts to your Unbounce landing page.

What You’ll Need:

  • An Adobe Creative Cloud Account.
  • Custom Fonts you’ve already selected from My Adobe Fonts.
  • An Unbounce account with a landing page where you’d like to apply your new fonts.

 

Adding Adobe Typekit fonts to your landing page takes two separate steps:

  1. Step 1: Add the Typekit Stylesheet CSS Link to Your Landing Page
  2. Step 2: Add the Typekit Custom CSS to Your Landing Page
    • Apply the Custom Font to Your Headings
    • Apply the Custom Font to Your Button
    • Apply the Custom Font to Your Entire Page

 

Step 1: Add the Typekit Stylesheet CSS Link to Your Landing Page

Once you’ve followed the instructions on choosing fonts to use and setting up web projects on the Adobe Website, the steps below will detail how to add the javascript for your specific web project to your landing page:

  1. Navigate to the Adobe Fonts website and click the My Adobe Fonts link at the top right of the page. A new screen will appear.
  2. Click the Web Projects link on the left side of the page. A new screen will appear.
  3. Select the Web Project that you’d like to use for your landing page and copy the script provided in the Embed Project panel. Keep this browser window open as you’ll need it later in Step 2!
  4. In a new browser window, navigate to the page overview screen of the landing page where you’d like to add your Adobe Typekit custom font. Click the Edit button next to the variant that you’d like to change to enter the Unbounce Builder.
  5. Click the Stylesheets stylesheets_button.png button in the bottom left corner of the page. A new dialog box will appear.
  6. typekit_stylesheets_link.png
  7. Enter Adobe Typekit in the Script Name. Paste the code you copied from the Adobe website into the blank field then click the Save Code button in the bottom right corner of the dialog box.
  8. typekitlinkstylesheet.png

The stylesheet link component of your Typekit font is now installed, so we can go ahead and move on to setting up the stylesheets to get your custom font to appear on your landing page.

 

Note:

You will see a small warning sign beside your Adobe Typekit stylesheet tab. This is normal and there are no issues related to this warning.

typekitwarning.png

 

Step 2: Add the Typekit Custom CSS to Your Landing Page

Click the Stylesheets stylesheets_button.png button in the bottom left corner of the Unbounce Builder. A new dialog box will appear.   

typekit_stylesheets_link.png

The next step involves a bit of code that depends on where you’d like to apply your custom font:

 

Apply the Custom Font to Your Headings

  1. In the Manage Stylesheets dialog box, type Headings Custom Font in the Stylesheet Name field.
  2. Copy the custom code below into the blank field:

    Note:

    Copying the code as is without amendments will result in broken code. Please follow the changes listed in steps 3-7 to amend your code before saving your stylesheet.
     
  3. Click back to the browser window where you have your My Adobe Fonts page open, or navigate to the Web Project page for your typekit that you selected.
  4. Click the Edit Project link on the right side of the panel.
  5. Click the Copy CSS button beside the specific font you want to use for your site.
  6. Return to the Unbounce Builder. Edit the code that you’ve added to the blank field by replacing the words    /* typekit CSS goes here */ with the code you’ve copied from the Adobe Fonts website.
  7. Before the semicolons for font-weight, font-family, and font-style, add the following: !important
  8. Your code should look like this when finished:typekit-headings-css.png
  9. Click the Save Code button at the bottom right corner of the dialog box.
  10. Save and Publish/Republish your page.

The finished results:

typekit_headings.png

Apply the Custom Font to Your Button

 

  1. In the Manage Stylesheets dialog box, type Button Custom Font in the Stylesheet Name field.
  2. Copy the custom code below into the blank field: 

    Note:

    Copying the code as is without amendments will result in broken code. Please follow the changes listed in steps 3-7 to amend your code before saving your stylesheet.
     
  3. Click back to the browser window where you have your My Adobe Fonts page open, or navigate to the Web Project page for your typekit that you selected.
  4. Click the Edit Project link on the right side of the panel.
  5. Click the Copy CSS button beside the specific font you want to use for your site.
  6. Return to the Unbounce Builder.  Edit the code that you’ve added to the blank field by replacing the words    /* typekit CSS goes here */ with the code you’ve copied from the Adobe Fonts website.
  7. Before the semicolons for font-weight, font-family, and font-style, add the following: !important
  8. Your code should look like this when finished:typekit-button-css.png
  9. Click the Save Code button at the bottom right corner of the dialog box.
  10. Save and Publish/Republish your page.

The finished results:


typekit_button.png

Applying the Custom Font to Your Entire Page

 

  1. In the Manage Stylesheets dialog box, type Custom Font in the Stylesheet Name field.
  2. Copy the custom code below into the blank field:

    Note:

    Copying the code as is without amendments will result in broken code. Please follow the changes listed in steps 3-7 to amend your code before saving your stylesheet.
     
  3. Click back to the browser window where you have your My Adobe Fonts page open, or navigate to the Web Project page for your typekit that you selected.
  4. Click the Edit Project link on the right side of the panel.
  5. Click the Copy CSS button beside the specific font you want to use for your site.
  6. Return to the Unbounce Builder.  Edit the code that you’ve added to the blank field by replacing the words    /* typekit CSS goes here */ with the code you’ve copied from the Adobe Fonts website.
  7. Before the semicolons for font-weight, font-family, and font-style, add the following: !important
  8. Your code should look like this when finished:TYPEKIT-entire-page-css.png
  9. Click the Save Code button at the bottom right corner of the dialog box.
  10. Save and Publish/Republish your page.

The finished results:

typekit_entire_page.png

Was this article helpful?
3 out of 6 found this helpful