Using Custom Fonts

How to set your own fonts?

Nir avatar
Written by Nir
Updated over a week ago

You can use custom fonts in Barilliance's different channels. Here is how to do it.

Email Personalization Recommendations Widgets

To use custom fonts in email personalization recommendations widget, send the otf, ttf or woff font file to Barilliance.
It will be added by us to the fonts supported for you in email recommendations widgets.
To select it select custom 1 - custom 4 in the fonts list.

Please note that proper licensing is required and is your responsibility.


Email content

Using custom fonts in emails is not recommended as these fonts are not supported by major email clients email clients. for more information visit https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/

If you still decide to use custom fonts in emails use the same procedure to add them to the editor as in the Onsite Content section below.

Onsite content (Popups, message bars) And triggered Emails

Important: Custom font in emails is limited and not fully supported by major clients such as Gmail. It is therefore not recommended!


Adding custom font to Barilliance editors from Google Fonts

1. Select the font in google fonts and make sure the licensing allows it.

2. On google fonts select the font style you would like to use.

3. Select the @import method as embedding type.

4. copy the URL of the font from the given code. for example from here:

The URL is

5. go to the settings page of your site and find the Custom Fonts section

Add the font name and URL and Save Changes.

6. The font is now integrated into popup and email editors where it can be used as any other font. If its to be used in emails make sure to use font stack fallback (see below).

Adding custom font to Barilliance editors from your own font file

Important :

  • It is your responsibility to ensure proper licensing of the font used.

  • The font file must be uploaded to a web accessible URL with sufficient scalability to be loaded by all end users. (for example during web page views if used in popups).

1. go to the settings page of your site and find the Custom Fonts section

2. Add the font name and URL to the font file and click Save Changes.

The font url box will be filled with Barilliance URL which is required to load the font file. The format is similar to :
https://static.barilliance.com/fonts-css/site_id=1/font pro.css

2. The font is now integrated into popup and email editors where it can be used as any other font. If its to be used in emails make sure to use font stack fallback (see below).

Font stack

Font stack is a list of standard fonts which the client should use if the custom font is not supported. It is strongly recommended to set font stack for custom fonts as not all clients support them.

Here is an example of a custom font with font stack:

Did this answer your question?