We're proud to be an Engage sponsor for Forge 2024! Learn more about our plans.
Connect with Team Stitch >
Email is a cornerstone of the modern brand experience — but oftentimes, emails differentiate from a brand's visual identity due to limitations with web-safe fonts.
But for marketers who want to ensure brand consistency across every touchpoint and through every detail — this episode of Thread The Needle is for you! Megan Hampton, Technical Producer at Stitch, shares tips for how to add custom fonts in your Braze workspace (without using HTML), including:
Hi, my name is Megan. I'm a Technical Producer here at Stitch. Today, I am going to walk you through adding a custom font to your Braze workspace. This is going to apply to your drag and drop builds. So we're going to start by going to settings, email preferences, and then your drag and drop email editor settings.
Here, you'll see the default font name, and you have the option to add a custom font. You'll need the font name and a hosted CSS URL. This doesn't work for WOFF files or OTT files. It's only going to be for CSS. Braze has a nice feature where there are tons of Google Fonts already available. So if there's a Google Font you want to use, you can type it in and add it. Braze will insert the font name and the CSS URL for you.
Once you've added your font, you should see a sample display here if it's working correctly. When you do this, save the changes. This is only going to apply as your default font for any new campaigns or canvases. It won't change anything that's already existing in your workspace.
Now, let's go to this campaign I already have started. I'm just going to refresh so that you'll see the new option. You'll see that Helvetica is still the font that's displaying. It's not going to change anything. But now in this drop-down, we will have Fuzzy Bubbles as an option. We can change our font and save that.
I am also going to show you how to add a custom font if it's not a Google Font. Let's use Adobe Fonts as an example. When you want to use an Adobe Font, you can create a project, add fonts to it, and it will generate code for you to use. You need the link and the font name. It's important to make sure the font name matches exactly, including case sensitivity. Otherwise, it will not work. Then, I can see my font change, so I know it's applied correctly. Save changes and go back to the campaign.
And then it'll keep Fuzzy Bubbles. Again, it won't change anything that you've already created. But now, instead of Fuzzy Bubbles, I'll see Nave as an option, and I can update my campaign to use Nave. One custom font can be limiting. You may have a font that is not considered web-safe but want to insert it. You can still use a web-hosted font where they're supported. You can put a variable in the URL, which won't make any difference. You won't see a sample, but you can save it and use a variable as the font name. Save that, and back in the campaign, refresh to see the change.
Now, in the dropdown, I have the custom font as an option. It won't do anything just yet. We need to add a little bit of Liquid and our font styles. This allows us to use more than one custom font without converting our template to HTML or coding our text as HTML in the drag-and-drop editor, which can be an annoyance for some clients.
In the content block, use HTML. First, put in the Assign Liquid to define the custom font variable. Insert a couple of font names, including single quotations. Then, insert the styles for the fonts. Each font styling needs its own style tag. Otherwise, only the first font will display correctly. Launch that content block and grab the content block Liquid. In your campaign, insert an HTML element and put that content block in there. In the builder, you won't see your font display, but in the preview, you will see those fonts working.
If you need to use a different fallback font like Helvetica instead of Arial, you can add Helvetica in the content block without any extra style. Refresh to see the new content. Inspect to see that Helvetica is now in there. This provides more flexibility around inserting fonts without being limited to just one.
And that is how to add custom fonts to your drag-and-drop editor.
%201.svg)
