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.
Here’s a quick summary of different types of fonts and their file extensions:
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.
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-family: 'My Custom Font';
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;