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

Follow

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

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 code! Check out our Google Fonts documentation for more information.

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

Do you have a custom company font that you’d like to use? Using a custom company font on an Unbounce landing page can be done by hosting a font on a non Unbounce web server.

This will require the assistance of your IT support team. Once you’ve installed the font on your landing page using the CSS @font-face rule, you can style the text on your landing page using CSS.

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.
  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.

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:

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 Button

  1. 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/Republishyour Page.

Apply the Custom Font to Your List Items

  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 Entire Page

  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.