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

Using Custom Bespoke Fonts and @font-face in the Classic Builder

Follow
Avatar
Meredith
Last Updated

Do you have a custom bespoke font that you’d like to use? In this article, you will learn how to:

Note:

Don't have a place to host custom font files? You can easily access a library of hundreds of Google fonts from directly within the Unbounce Builder without using any code! Check out our Google Fonts documentation for more information.

How to Install a Bespoke Font to Your Landing Page Using the Custom Font Feature

Do you have a custom brand font that you’d like to use? Using a custom brand font on an Unbounce landing page can be done by hosting a font on a non-Unbounce web server and adding it to the Page Builder using the Custom Font Feature.

What you’ll need:

  1. Access to a non-Unbounce web server for hosting your font

Step 1: Contact Your It Support Team to Host Your Bespoke Font on a Non-Unbounce Web Server

The first and most crucial part of using a custom bespoke font is to host your font on a web server. Your IT team will need to upload the fonts to a server and provide access to that server, so Unbounce has access to the fonts.

We recommend that you speak with your IT support team to help you upload your font to a web server.

Please ask that your IT support team completes the following for the font to work correctly in Unbounce:

Upload the font files to your server.

  1. Upload the font files to your server in .eot, .woff, .ttf, or .svg format.
  2. Grant permissions and access to the font files for both app.unbounce.com and your Unbounce domain; otherwise, you won't be able to add your font to your Unbounce landing page.
  3. Provide you with the new URLs for your custom fonts.
    • Please take note of these URLs, as you’ll need them to add your fonts to your landing page.

Once your team uploads the fonts to a web server and provides you with those URLs, you’re ready to add the fonts to your Unbounce page.

Step 2: Adding Your Font to Your Landing Page Using the Custom Font Feature

  1. In the Unbounce builder, double-click on the text block you’d like to change to a custom font.
  2. In the Properties tab on the right side of the Builder, select the Style tab.
  3. Expand the Family drop-down menu and select Add/Remove Font. A new dialog box will appear.
    google fonts drop down menu.png
  4. Click the Add Custom Fonts button at the bottom left corner of the dialog box.
  5. On the next page, add a Font Family Name, the link to your custom font, and choose a font weight from the dropdown.
    Custom Fonts - Font Dialog 2.png
  6. Click on the Add button in the bottom right corner of the dialog box.
  7. Click on Done. Your newly added font will now be available from the Family drop-down menu.

Common Issues

Custom Fonts - Font Dialog Error.png

If you see an error saying "This URL isn't accessible. Please provide a correct URL." when your font's hosted URL, ask your IT team to check the CORS policy to ensure both app.unbounce.com and your Unbounce domain are allowed access to the file.

How to Install Bespoke Font to Your Landing Page using @font-face

If you'd prefer to use CSS to add fonts to your landing pages, you can also add them manually using the CSS @font-face rule.

What you’ll need:

  1. Access to a non-Unbounce web server for hosting your font
  2. Custom Bespoke Font files licensed for CSS @font-face use

Using a custom bespoke font on your Unbounce landing page requires some effort, so we’ll break it down into steps that will be simpler to follow. We recommend sharing these steps with your IT team. 

Step 1: Contact Your It Support Team to Host Your Bespoke Font on a Non-Unbounce Web Server

The first and most crucial part of using a custom bespoke font is to host your font on a web server.  Your IT team will need to upload the fonts to a server and provide access to that server, so Unbounce has access to the fonts. 

We recommend that you speak with your IT support team to help you upload your font to a web server. 

Please ask that your IT support team completes the following for the font to work correctly in Unbounce:

  1. Upload the font files to your server.
    • Be sure to upload multiple font formats to your server for maximum compatibility (we recommend .eot, .woff, .ttf, and .svg formats).
  2. Grant permissions and access to the font files for your Unbounce domain; otherwise, you may notice some issues with rendering the font within your browser, such as Cross-Origin Resource Sharing (CORS) errors.
  3. Provide you with the new URLs for your custom fonts.
    • Please take note of these URLs, as you’ll need them to add your fonts to your landing page.

Once your team uploads the fonts to a web server and provides you with those URLs, you’re ready to add the fonts to your Unbounce page.

Step 2: Add Your @Font-Face CSS in the Classic Unbounce Builder

  1. Navigate to the page overview screen of the landing page where you’d like to add your custom bespoke font.
  2. Click the Edit button next to the variant you’d like to change to enter the Unbounce Builder.
  3. Click on the Stylesheets button-titled-stylesheets button towards the bottom of the builder,  then click + Add New Stylesheet button. A new dialog box will appear. Gif showing where to find stylesheet tab in Classic Builder
  4. Enter Bespoke Font Main CSS in the Stylesheet Name field. Paste the code below into the blank field.

    Note:

    Copying and pasting the code without making the required amendments listed in steps 5 and 6 will result in broken code. Please follow the steps before saving your stylesheet.
  5. Replace all the URLs in the newly pasted script with the URLs for your fonts provided to you by your IT team.
  6. Replace the word 'MyFontName' with the name of your bespoke font.

Replace only the URLs in the script.. #iefix and #svgFontName must still be included in the code.

  1. Click the Done button in the bottom right corner of the dialog box to finalize these changes.
  2. Be sure to Save and Publish/Republish Your Page.

Now that you’ve included your code for giving your Unbounce landing page access to your bespoke font, let’s add these fonts to your landing page text.

How to Apply Custom Bespoke Font to Text Elements Using CSS Stylesheets

Now that you’ve added your custom bespoke font to your landing page, you can apply it to text elements on your page using CSS stylesheets. Some examples of text elements that can be styled on your page are headings, paragraphs, buttons, and list items.

Click the Stylesheets button-titled-stylesheets button at the bottom left corner of the Unbounce Builder. A new dialog box will appear.   

The next step involves a bit of code that depends on where you’d like to apply your custom font. There are five separate scripts below that you can copy and paste into the Classic Builder to style specific text elements on your page:

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 and pasting the code without making the required amendment listed in step 3 will result in broken code. Please follow this step before saving your stylesheet.

  1. Edit the code that you’ve added to the blank field by replacing the word 'MyFontName' with the name of your bespoke font.
  2. Click the Done button at the bottom right corner of the dialog box.
  3. Save and Publish/Republish your Page.

Apply the Custom Font to Your Paragraphs

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

Note:

Copying and pasting the code without making the required amendment listed in step 3 will result in broken code. Please follow this step before saving your stylesheet.

  1. Edit the code that you’ve added to the blank field by replacing the word 'MyFontName' with the name of your bespoke font.
  2. Click the Done button at the bottom right corner of the dialog box.
  3. Save and Publish/Republish your Page.

Apply the Custom Font to Your Button

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

Note:

Copying and pasting the code without making the required amendment listed in step 3 will result in broken code. Please follow this step before saving your stylesheet.
  1. Edit the code that you’ve added to the blank field by replacing the word 'MyFontName' with the name of your bespoke font.
  2. Click the Done button at the bottom right corner of the dialog box.
  3. Save and Publish/Republishyour Page.

Apply the Custom Font to Your List Items

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

Note:

Copying and pasting the code without making the required amendment listed in step 3 will result in broken code. Please follow this step before saving your stylesheet.
  1. Edit the code that you’ve added to the blank field by replacing the word 'MyFontName' with the name of your bespoke font.
  2. Click the Done button at the bottom right corner of the dialog box.
  3. Save and Publish/Republish your Page.

Apply the Custom Font to Your Entire Page

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

Note:

Copying and pasting the code without making the required amendment listed in step 3 will result in broken code. Please follow this step before saving your stylesheet.
  1. Edit the code that you’ve added to the blank field by replacing the word 'MyFontName' with the name of your bespoke font.
  2. Click the Done button at the bottom right corner of the dialog box.
  3. Save and Publish/Republish your Page.

Related articles