4 Easy Steps to Use Any Custom Font With Message Editor

Chris Pressey, Digital Designer

Chris Pressey, Digital Designer

Author Bio

The energizer designer that just won’t stop, Chris Pressey absolutely loves what he does every single day. As a digital designer, he enjoys using both sides of his brain to solve complex issues, while making sure every design he touches looks ready to rock. In middle school, Pressey was exposed to his first creative suite, and the rest was history. While most were searching for their passion, he was already sharpening his skills to pursue his dream. Don’t let his geeky passion fool you, though, as he loves to get out and find anything he can to get the adrenaline pumping.

Custom fonts can be a powerful branding tool. Everyone can think of companies who are synonymous with their fonts. So it makes sense we all want to use a custom font in our emails. Well, there’s good news, and there’s bad news.

The good news is, if your company has a favorite branded font, you can use it in Bronto messages. The bad news is, Bronto can’t guarantee your customers will see the font when they receive the message. Unfortunately, custom fonts aren’t supported by most email clients. To cover the non-cooperative email clients, you can declare a default font-family, or fallback font, so your message design still looks good if your custom font does not display.

What Do We Consider a Custom Font?

You may have heard of a “web safe font.” These are the most common fonts that are fully supported by all browsers, and in our use case, email clients. In the Bronto Message Editor, you can find these web safe fonts in your Text Settings: Arial, Courier New, Georgia, Helvetica, Palatino and Times New Roman.

To use a custom font other than these defaults, follow these steps:

Step One: If It’s a Google Font, Download It.

(Not using a Google font? Skip to Step Two: Convert Your Font File.)

  1. Locate your Google font within the Google font library and click the small, orange plus symbol in the upper right corner.
  2. Click on the window that displays toward the bottom, and select the download option (upper right corner). We recommend downloading the font, rather than using Google’s provided CSS, because it helps to avoid unwanted HTML or CSS snippets being added to your message headers. Also, in the event that Google changes the fonts in their library, your downloaded file would continue to work.

Step Two: Convert Your Font File.

(Already have a .WOFF font file saved? Skip to Upload Your Font File to Bronto.)

  1. Your custom font file will have one of these extensions: .TTF (TrueType Font) or .OTF (OpenType Font). The only font file type that Bronto can support is .WOFF (Web Open File Format). There are many online file converters available, but personally I prefer Transfonter.
  2. Check your settings in Transfonter: Make sure that Family Support and Base64 Encode are turned on, and make sure you select the WOFF file option.
  3. Click the Add Fonts button at the top, then select and open the desired font file from your desktop. You will see a blue progress bar. Once it turns green, you are ready to convert your file.
  4. Click the Convert button next to Add Fonts, where you will see a processing animation until the Download and Preview options appear. Click Preview to make sure the font displays correctly. Click Download and you will receive a .ZIP file containing your font file assets. Now you can add this font to Bronto.

Step Three: Upload Your Font File to Bronto.

  1. Now that your font is downloaded and formatted, go to your Bronto account and click on the Content tab in the main menu. In the drop-down menu, click Hosting.
  2. Upload the .WOFF file to a dedicated folder of your choice. Options to create a folder and upload your file will be at the top left corner of your Hosting window.
  3. Once your font is uploaded, open a new Bronto tab and find a message you can edit to include your custom font.

Step Four: Add the Custom Font to Your Messages’ CSS.

  1. Select a message and click Edit to open it in the Bronto Message Editor.
  2. Click on the Settings section in the left-hand palette, then select Edit CSS.
  3. Copy the sample CSS code below, and paste to the Edit CSS window.

  1. Now we need to customize this CSS so your message knows to use your custom file. Where it says YOUR_FONT_NAME, insert your font’s name within the apostrophes.
  2. Next we need to return briefly to Hosting. Right-click on the font file you uploaded, and select Copy URL.
  3. Return to your message and paste the URL where it says FONT_FILE_URL. Be sure you don’t delete the quotation marks!

Your font CSS is complete! Now let’s make sure all of your text elements properly display your cool font.

Verify and Complete

  1. From the Editor palette, drag a Text element anywhere into the message canvas.
  2. Select Design and scroll down to Font Family. Enter the name of your custom font here.

As you will notice, our example includes, “Arial, Hevetica, Sans Serif” after the added custom font name. As mentioned earlier, these are called fallback fonts, and they help ensure your message still renders well, even when the custom font does not display. w3schools has a great list of all web safe fonts and their related family names.

You did it! You now should see the newly added font display in the message canvas. If you don’t, try going through the steps again to check for typos or steps you missed. Make sure to test your message design by previewing messages with both the custom font and the default font-family.

Troubleshooting

If things didn’t work out with your custom font upload, don’t worry. I’ve found a few debugging tricks that should set you up for success.

  1. In your CSS code, within the Settings tab of the Bronto Message Editor, take a quick peek at your hosting URL. If it starts with Error! Hyperlink reference not valid., simply change it to https:// and you should be able to watch the font change on your screen.
  2. Still nothing? Let’s check something else. Make sure there are no spaces within your font’s name. For example, if your font is Open Sans, make sure it displays as Open-Sans or OpenSans. This will have to be changed in the CSS as well as in any text element for which you changed the font family. The combination of this and our last trick should work.
  3. Trouble still? Hmm. This may be a browser cache issue. Go to your browser settings and clear all browser cache, hosting data and cookies. Refreshing your browser should make it possible for Bronto’s Message Editor user interface to show the correct font.

If you need further assistance, contact your account manager to get access to our Professional Services team, who can assist with custom elements like this in your email campaigns.

Happy designing!