1. Documentation
  2. Working in the Classic Unbounce Builder
  3. Working with Text & Fonts

Using Adobe Fonts on Your Landing Page

Follow
Avatar
Meredith
Last Updated

Note:

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

Adding Adobe Fonts to your landing page takes three separate steps:

Step 1: Select Your Adobe Font

Step 2: Add the Adobe Font Embed Code to Your Landing Page

Step 3: Copying the Font CSS From Adobe

Step 4: Apply the Font to Your Headings, Button(s), or Entire Landing page

What You’ll Need:

  1. An Adobe Creative Cloud Account.
  2. Custom fonts selected from the Adobe Fonts library.
  3. An Unbounce account with a landing page where you’d like to apply your new fonts.

Adobe has excellent instructions on choosing custom fonts to use on your website in their documentation, but we’ve included the first few steps below to help get you started.

Step 1: Select Your Adobe Font

Once you’ve followed the instructions on choosing fonts to use and to set 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 sign in to your Adobe Creative Cloud account. 
  2. Once you are in your account, you can sort through the font library using the filters on the left-hand side of the page.
  3. Click on your chosen font to open the family page and see all of the font weights and styles that are available to use.
  4. Click </> Add to Web Project at the top of the page to add the font family to a web project.
  5. In the pop-up display, select the font weights and styles you would like to use, and add them to a new or existing web project:
    a gif of list of fonts styles from Adobe
  6. Select Create or Save once you are finished.
  7. From the pop-up that appears next, copy the embed code provided, as you will need it to add your Adobe font to your landing page:
    annotated image copying the link tag from a pop-up window in Adobe

We will use this code snippet (also known as a link tag) and paste it into the Unbounce Classic Builder. The link tag will provide the font source code required for it to show on your Unbounce page.  

Step 2: Add the Adobe Font Embed Code to Your Landing Page

  1. In a new browser window, navigate to the Page Overview screen of the landing page where you’d like to add your Adobe font.
  2. Click the Editbutton next to the variant you’d like to change to enter the Unbounce Builder.
  3. Click the Stylesheets button in the bottom left corner of the page. A new dialog box will appear:
    annotated image of red arrow pointing to a button titled Stylesheets in the Unbounce Classic Builder
  4. Enter Adobe Font in the Stylesheet Name field. Paste the code you copied from the Adobe website into the blank field:
    a code box with a link tag pasted
  5. Click the Done button in the bottom right corner of the dialog box.

You've now installed the stylesheet link component of your Adobe font,  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 Fonts stylesheet tab; this is normal, and there are no issues related to this warning.

Step 3. Copying the Font CSS From Adobe

Now that you have added your Adobe font embed code to your landing page, you can apply it to text elements on your page using CSS stylesheets.

To start, we’ll need to copy the CSS from Adobe.

  1. In Adobe Fonts, navigate to the Web Projects section.
  2. Click the Edit Project link on the right side of the panel:
    annoted image of Adobe interface with arrow pointing to Edit Project button
  3. Choose the specific font you would like to use, and click the Copy symbol under the Copy CSS column on the far right side of your font selection:
    a list of font styles to copy from Adobe; the image is annotated with an arrow pointing to a Copy CSS button

Keep this page open, as we’ll need to paste this into the Unbounce Builder.

Step 4: Applying the Adobe Font to Your Headings, Buttons, or all Text

Return to the browser window with the Unbounce Builder.

  1. Click the Stylesheets button in the bottom left corner of the page again. A new dialog box will appear.
  2. In the Manage Stylesheets dialog box, provide your sheet a name within the Stylesheet Name field - keep this relevant to what you want the font style to apply to.
  3. Choose from one of the below custom codes depending on what text elements you want to apply the custom font to:

Apply the Custom Font to Your Headings

Apply the Custom Font to Your Button(s)

Applying the Custom Font to Your Entire Page

Note:

Copying and pasting the code without making the required amendments listed in steps 4- 6 will result in broken code. Please follow the steps below before saving your stylesheet.

  1. Copy the above custom code, and paste it into the dialog box.
  2. Edit the code by replacing the words /* typekit CSS goes here */ with the CSS code from the Adobe Fonts website <hyperlink to section>.
  3. Before the semicolons for font-weight, font-family, and font-style, add the following: !important
  4. For example, to apply custom Adobe Typekit fonts to Headings, your code should look like this when finished:
    Code dialog box in the Unbounce builder with CSS font code copied from Adobe
  5. Click Done at the bottom right corner of the dialog box.
  6. Save and Publish/Republish your page.

Note:

Note that adding custom Adobe fonts via CSS will only show on the live landing page (in the browser) or in Preview mode. Remember to publish your page or Preview it in the builder to test these fonts. 

Related articles