How to use WebFonts in your Emails

If you want to customise your email campaign designs for unique look, custom fonts can be what you have in mind. Let's see how to integrate them.

For the start

By default, you have a selection of fonts already provided - you can change them in both Simple and Advanced Editors by going to text box options.

But what if you want to use other fonts or you have some created just for your company? For example, you can use Google Fonts website which will give you lots of free to use fonts. Plenty of other websites offer font selections too, but not all of them will allow you to use those for free, be sure to check their licence first.

Let's see how to choose a custom font from Google Fonts:

• After entering the website, you will see a large selection of fonts.

• Scroll down to look for the font that you like and click on the plus icon in the top right corner.
• The font will be added to your selection. Now, a black rectangle on the bottom of the page will appear, click on it. By clicking "customise", you can customise the font you want to import. Have in mind that the more versions you choose, the "heavier" the font will be and it will take longer to import it.
• Now copy only the URL from the link section. Don't close this screen yet, you will need it later.

• Paste the link in the browser URL input field and you will see similar website:

• Copy this piece of code, similar to the one from the example above.

Now, let's see how to use this font in your User.com email campaign.

@font-face method

This is your go-to method - it acts like a direct-to-the-source type of importing web fonts. To add the font, you will need to edit the code first. To do this, you can either use Advanced Drag&Drop or choose the blank template and then edit the raw code.

• In the Advanced Editor click on that button:

• You will see the code edit window. Scroll down until you see the last closing '</style>' tag. Just above it paste the code you copied from the website before, it will look somewhat like this:

@font-face {
 font-family: 'Tomorrow';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: local('Tomorrow Regular'), local('Tomorrow-Regular'), url(https://fonts.gstatic.com/s/tomorrow/v2/WBLmrETNbFtZCeGqgRXSe2A.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}