Check what font is displayed in active weblayers

To check what font is currently being displayed in your active weblayer simply right-click on the element and choose to inspect from drop-down menu.

Once the developer tools pop up navigate to the computed section in the elements tab and scroll down to the bottom where you shall see the rendered fonts.

The example above was made using Chrome browser however, the steps described should be similar for other modern browsers.

Custom font in weblayers

❗️

Advanced topic

This is an advanced topic that requires knowledge of HTML and CSS. Using your own custom code may affect how the weblayer is rendered on the page. Make sure to use correct and responsive HTML and CSS.

How to add a single font to weblayer templates

In order to add a custom font to a WL you need to make 3 steps:

1. Make the font file publicly available: You can upload it to the asset manager, use public font hosting like Google fonts, or your own hosting.
2. Link CSS with a link to the font file to WL code: You can find an example of such CSS in our guide on email custom fonts. . Note that you don't need to add font to project settings, it is required only for custom fonts to be used in Email Visual Editor. The CSS file can be included in HTML with a link tag or in CSS with the @import rule. Alternatively, the font link can be included directly in the weblayer CSS with the @font-face CSS rule.
3. Add font rules to the weblayer CSS: In other words, mark elements where the font must be used. You can do so by using the font-family CSS rule. Remember that you can use inherit value for elements if you want them to use their parent element font family. You can find an example of how font family can be included below.

How to add multiple custom fonts that can be selected using template parameters.

In order to create a template where multiple fonts can be chosen you need to follow the next steps (the first two steps will be the same as in the previous use case):

1. Make the font file publicly available: Upload the font files to the asset manager, use public font hosting like Google fonts, or host them on your server.
2. Include CSS file with font links: For this example, let's include the Google font "Roboto Condensed." Add the following @import rule at the top of your Weblayer CSS:
   @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
3. Create a Jinja variable: Jinja variable will store a template parameter, allowing you to choose the Roboto Condensed font from the WL configuration. If added correctly, you will see a dropdown in the WL configuration panel. You can find more information about template parameters here. Note that you can add multiple variants to the enum parameter e.g. enum('Roboto Condensed',' Custom font 2','Custom font 3'). this will let you choose from 3 variants. Add the following Jinja code to add a parameter: {% set textFont="[[ { name: 'textFont', tooltip: 'Font', category: 'Typography', isJsonParam: true } : enum(Roboto Condensed) ]]" %}.
4. Add font-family rule: In the weblayer CSS, add the following rule to elements where the font should be used:
   .selector { font-family: {{ textFont }}; }See the screenshot below for reference.
5. Repeat steps 1-3 for additional fonts: If you want to add more fonts, repeat the previous steps (1-3) for each font you would like to include.

How to change JS code in weblayer countdowns to more than 100 hours

You may face a problem when weblayer the countdown timer is showing 100+ hours, and the countdown module is able to display only two characters up to 99 hours maximum. In the following image, the hour's field should display 198 hours, but it is only displaying 98 because the first character was stripped by default.

This issue can be fixed by altering weblayer’sJavaScript code. You only need to allow 3 characters in the weblayer hour's field.

You must go inside your JavaScript code and find the initializeClock function. In that function, there is a line that sets the hoursSpan inner HTML, you need to modify a parameter passed to slice method.

In order to show 3 digits in the hour's field, you have to amend the slice(-2) to slice(-3). With this, you basically set up the limit of the characters in the targeted hour's field, and the output of the countdown banner wouldn't be misleading, but it will be correct if it shows values over 99.