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:
What You’ll Need:
- An Adobe Creative Cloud Account.
- Custom fonts selected from the Adobe Fonts library.
- 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
- Navigate to the Adobe Fonts website and sign in to your Adobe Creative Cloud account.
- Once you are in your account, you can sort through the font library using the filters on the left-hand side of the page.
- Click on your chosen font to open the family page and see all of the font weights and styles that are available to use.
- Click </> Add to Web Project at the top of the page to add the font family to a web project.
- 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:
- Select Create or Save once you are finished.
- 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:
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
- In a new browser window, navigate to the Page Overview screen of the landing page where you’d like to add your Adobe font.
- Click the Edit button next to the variant you’d like to change to enter the Unbounce Builder.
- Click the Stylesheets button in the bottom left corner of the page. A new dialog box will appear:
- Enter Adobe Font in the Stylesheet Name field. Paste the code you copied from the Adobe website into the blank field:
- 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.
- In Adobe Fonts, navigate to the Web Projects section.
- Click the Edit Project link on the right side of the panel:
- 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:
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.
- Click the Stylesheets button in the bottom left corner of the page again. A new dialog box will appear.
- 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.
- 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
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.
- Copy the above custom code, and paste it into the dialog box.
- Edit the code by replacing the words /* typekit CSS goes here */ with the CSS code from the Adobe Fonts website <hyperlink to section>.
- Before the semicolons for font-weight, font-family, and font-style, add the following: !important
- For example, to apply custom Adobe Typekit fonts to Headings, your code should look like this when finished:
- Click Done at the bottom right corner of the dialog box.
- Save and Publish/Republish your page.
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.