How to use WebFonts in your Emails
Learn how to integrate custom fonts in your email messages!
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;
}
- Now you need to change the font in the styling elements of your message. Search for all of the elements similar to that:
font-family:"Sulphur Point", sans-serif;
- And replace it with your new piece of code, copied from the font selection window on Google Fonts website, in our example it will be:
font-family: 'Tomorrow', sans-serif;
- Click on 'Save', your font in the editor should be looking different! Now continue using this font in this email creator, just remember to change the 'font-family' to every text box you add.
Remember! It is necessary to provide fall back font, in our example it is 'sans-serif'. In case your custom font will not be supported by the receiver's mail client, the receiver inbox will use the font that is recognised by all of the email clients. List of the web safe fonts is here.
Of course you are not limited to Google Fonts only - if you want to use your own font hosted on separate URL you can do it easily. Just be sure to follow this format of code:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
More on that here.
Remember
It is always a good practice to test your email by sending it to yourself just like you would send it to your Users. This way you can check any styling or code mistakes that might have been overlooked in the creation process.
- Create a new Email Campaign
- Choose an already created email, prepared to your Users
- Send it only to yourself or your Team as well to fully know how your message will behave on different email clients.