Using Custom Bespoke Fonts and @font-face

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.

 

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 in two different ways:

  • Host on a non Unbounce web server and use custom css (requires IT support)
  • Host your font on Adobe Typekit

Hosting your font on an non Unbounce web server will definitely require IT support and can be a very complicated process. It also requires some knowledge of CSS.  If you don’t have access to an IT team or an non Unbounce web server, then hosting your font with Adobe Typekit may be a better option for you.

 

Using CSS and @font-face to Add Your Bespoke Font to Your Landing Page

What you’ll need:

  • Access to a non Unbounce web server for hosting
  • Assistance from your IT team
  • Custom Bespoke Font 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:

  • Step 1: Contact your IT Team to Host Your Bespoke Font on a non-Unbounce Web Server
  • Step 2: Add Your @font-face CSS in the Unbounce Builder
  • Step 3: Apply the Font Using 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: Contact your IT Team to Host Your Bespoke Font

The first and most important part of using a custom bespoke font is having your font hosted on a web server. The fonts need to be uploaded and provided with special server access so that Unbounce has access to the fonts. This is a very complicated process and it is recommended that you speak with your IT team to help you with getting your font uploaded and ready to share on your landing page.  

Your IT team will need to provide you with the new URLS for your custom fonts. Take note of these URLS as you’ll need them to add your fonts to your landing page.

Once your IT team has uploaded the font to a webserver and you’re ready to add the fonts to your Unbounce page, continue on to step 2: add your @font-face css in the Unbounce Builder.

Note: For maximum compatibility, upload multiple font formats to your server (eot .woff . ttf ,and .svg are recommended).

 

Step 2: Add Your @font-face CSS in the Unbounce Builder

  1. Navigate to the page overview screen of the landing page where you’d like to add your custom bespoke font. Click the Edit button next to the variant that you’d like to change to enter the Unbounce Builder.
  2. Click on the Stylesheets image1.png button. A new dialog box will appear.
  3. Enter Bespoke Font Main CSS in the Stylesheet Name field. Paste the code below into the blank field.

    Note:

    Copying the code as is without amendments will result in broken code. Please follow the changes listed under the code to amend your code before saving your stylesheet.
  4. Replace all the URLs in the newly pasted script with the URLS for your fonts provided to you by your IT team.                                         

Note:

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

  1. Click the Save Code button in the bottom right corner of the dialog box.

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.

Step 3: Apply the Font Using CSS to Your Landing Page

Click the Stylesheets button in 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
  • Apply the Custom Font to Your Button
  • Apply the Custom Font to Your Entire 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 the code as is without amendments will result in broken code. Please follow the changes listed under the code to amend your code before saving your stylesheet.
  1. Edit the code that you’ve added to the blank field by replacing the words /* font-name goes here*/ with the name of your bespoke font.
  2. Click the Save Code 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. 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 under the code to amend your code before saving your stylesheet.
  1. Edit the code that you’ve added to the blank field by replacing the words /* font-name goes here*/ with the name of your bespoke font.
  2. Click the Save Code 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 the code as is without amendments will result in broken code. Please follow the changes listed under the code to amend your code before saving your stylesheet.
  1. Edit the code that you’ve added to the blank field by replacing the words /* font-name goes here*/ with the name of your bespoke font.
  2. Click the Save Code button at the bottom right corner of the dialog box.
  3. Save and Publish/Republish Your Page.

 

Was this article helpful?
5 out of 23 found this helpful