Using your own custom fonts in a Justuno pop up

While Justuno offers full support of Google font's automatically through it's easy interface, we understand some may rather use their website's custom fonts instead.  With Justuno this is possible, it just requires a little custom code to enable.

Prerequisites:

  • Your custom font files must be hosted somewhere already (your website, amazon S3 or a CDN...) and it must support being called over both http and https.
  • It's in your best interest to have all the necessary font file types so that it's browser compatible.
  • You should have a basic understanding of CSS.

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.

 

How to:

Whew, now that we got past that stuff, we can show you how to do it.

First, we'll 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:

Then make sure in the custom code window you are editing the overlay CSS and that you have turned on the overlay css button.

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. 

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

Don’t forget to replace the font name with the one you have and update the code to reflect the correct the file path.  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.

Add the same CSS code additional times to define bold, italicized, header text and the like, keeping sure you update the file name and path to reflect the purpose of the font.

When you are done editing the custom overlay CSS portion, use the [back to canvas editor] button on the left of that screen. 

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.

* {
font-family: 'My Custom Font',Arial !important;
}
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.