Using your own custom fonts in a Justuno pop up

When a specific font family is not available in our default library or in Google fonts, the custom font will need to be imported. This is a guide on how to do this.

At a glance:

• Prerequisite
• Importing and applying the font

Last updated 8/10/2021

Intro

Justuno has a set of built in fonts through the editor that can be used. Through the editor we also have our options expanded by importing Google fonts if the desired font s not available through our built in options.
There are times when a specific font family will not be available through either of these options. In these scenarios, the font will need to be imported, below are the steps on how to import and use the desired font.

Prerequisites

• Must have access to the font whether it be through a free resource or licensed.
• Once you have access to the fonts, they must be hosted somewhere that support being called over HTTP and HTTPS (your website, amazon S3, a CDN, etc).
• A basic understanding of CSS.
• It's in your best interest to have all the necessary font file types so that it's browser compatible (see below).

Here’s a quick summary of different types of fonts and their file extensions:

• TrueType Font (TTF) – Compatible with Internet Explorer version 9.0 and above, Chrome starting at 4.0, Firefox at 3.5, Safari since 3.1 and Opera beginning with 10.0
• OpenType Font (OTF) – Has the same browser compatibility as the TrueType Font
• Web Open Font Format (WOFF) – Supported by Internet Explorer version 9.0 and above, Chrome starting at 5.0, Firefox at 3.6, Safari since 5.1 and Opera beginning with 11.1
• Web Open Font Format 2.0 (WOFF2) – Supported only by Chrome since version 36.0, Firefox starting at 35.0 and Opera with 26.0
• Embedded OpenType Font (EOT) – Exclusively available for Internet Explorer version 6.0 and above.

The Web Open Font Format has become the standard since the fonts are compressed to consume less of your bandwidth and contain extra metadata. Unfortunately, they’re not always available to download.

If you’re having trouble finding this kind of file, TrueType and OpenType fonts are more readily available for download and are still great choices.

Importing and applying the font

Once the prerequisites have been met, we can begin to import the desired font family.

1. We will need to add the CSS code to load your external font files. To do this head over to the </> Custom Code section within your Justuno Promotion's editor. Use the button pictured here in the top right:
   
2. Then make sure in the custom code window you are in the Pop Up CSS  tab and that you have turned on the Override Default CSS toggle.
   
3. Copy and paste the following code into that window. Make sure there is a line break in between each block of CSS and the code you enter.
   
   1. Set your font family name
   2. Replace the URL below with your hosted font URL. Make sure that the path starts with // instead of http or https that way it will automatically use the correct one depending on the situation.
      

      @font-face { 
      font-family: 'My Custom Font';
      src: url('//yoursite.com/fonts/FontName-Regular.ttf'); 
      font-weight: normal; 
      }

4. Applying the imported font.
   Finally, you can use this font by editing the HTML for any of your text editable layers by selecting the layer and then clicking on the [source] button on the popup text editor.
   
   You will need to add or change the appropriate HTML to include the CSS style attribute referencing that font file you are loading:

   <span style="font-family: 'My Custom Font',Arial;">WELCOME</span>

    

• An alternative option to this last step is that you could add the following to custom CSS code block in the first step to override and make everything in the popup the same font. Which can be done by adding the following under the first piece of code. Just note that as long as this exists that you won't be able the change any of the font's on any elements.

.design-layer-editable, .design-layer-editable * {
font-family: 'My Custom Font',Arial !important;
}

Want to supercharge your onsite promotions? Check out Justuno Plus, a premium plan for marketers featuring exclusive access to our AI product feed, a dedicated CRO Strategist, and more. Justuno Plus