Using custom fonts in Beefree

Why Use a Custom Font (Web Fonts)

There are times when you may need to use a font that is not already available in Beefree. For example, you may need to follow strict branding guidelines in your company. Or perhaps you are working with a client that uses a specific font for their communication. Maybe you just want to experiment with new font styles!

Beefree allows you to add custom fonts to your Beefree account. You can use them when designing both emails and pages. Note that you can only leverage fonts that are available through the web, called Web fonts.

Let's dive in.

Email Client Support

Unfortunately, not all email clients support Web fonts. In general, web fonts work in:

• iOS Mail
• Apple Mail
• Android (default mail client, not Gmail app)
• Outlook 2000
• Outlook.com app
• Thunderbird

Campaign Monitor has an in-depth guide to using Web fonts in email if you want to learn more about this topic. Litmus has a detailed guide as well.

As you can see from the list above, there are a couple of very popular email clients missing from the list. Specifically...

Adding a Custom Font

Log into your Beefree account and navigate to Settings > Styles. Scroll down until you see the Fonts section. You can add a custom font by clicking the button that displays with a + icon.

A form will open.

Form inputs

Font name

This is the font name that will be displayed in the builder. It usually matches the font name, but you can customize this in any way you would like.

Font CSS URL

The address of the CSS document used to embed the font files and the CSS rules that apply them. For example, this is a Montserrat stylesheet generated by Google Fonts: https://fonts.googleapis.com/css?family=Montserrat. 

It's a best practice to use a dedicated CSS sheet. If the CSS contains additional styles, the host application is likely to inherit them. This can cause problems in the Beefree user interface.

Google Fonts already provides web fonts that work in the builder and most email clients. See below for more about how to easily use Google fonts with Beefree.

Once you insert your CSS URL, we perform some checks to make sure it's a valid stylesheet. You'll see a message that says Checking your data... while we do this. If the stylesheet is valid, some new fields will populate. 

Font family

This section only populates if you input a CSS URL referring to more than one font. You must use the dropdown to select which font you want to import. By default, we'll select the first font listed in the stylesheet. 

Font weights found

Here we list all of the font weights we found on your stylesheet. Anything listed here will be available for you to use in the builder. You can't interact with the list. If you want to remove any styles, you need to modify your stylesheet. 

Font Stack

This is the font-family stack (CSS syntax) that will be applied to the text paragraphs. Use the dropdown menu to select a font stack from fonts already available in Beefree. The options available are based on the default and web fonts enabled for the workspace.

We recommend building a font stack with some fall-back choices. Remember that Gmail and other email clients will not display web fonts. It's important to add a web-safe font, such as Arial for sans-serif fonts or Times New Roman for serif fonts. 
Example:

Once you click Submit, the new custom font will be added at the bottom in the Custom fonts section. This section is always at the top of your font settings. The preview also includes the number of weights included for your custom fonts. 

You can now use your custom font in the builder from anywhere within this workspace. 

Modifying Custom Fonts

You cannot edit a custom font. If you want to edit the settings, we recommend you delete and re-import the font. You can view the existing settings for your font at any time by clicking on the font card within your settings. To delete an existing custom font move the mouse cursor over the ✔ mark. The icon will change to a 𝙓 indicating the delete action.

A confirmation message will display to reduce the chances of accidental deletion.

Using Google Fonts

Google Fonts provides a rich catalog of web fonts free of charge and ready to use. In order to use a Google Font in Beefree, start by copying just the HREF content from the widget. You can see an example of this below. 

Simply copy and paste this into the CSS URL field for Beefree. The rest of the setup occurs directly in Beefree. You may want to refer to the Google Fonts recommended font stack to help build your own. 

Using Adobe fonts

If you wish to use Adobe fonts inside Beefree, go to fonts.adobe.com (the old Typekit). On this website, you can find the font library and all the font selections.

Once you've located your preferred font, activate it.

Once enabled, click on the [</>] icon. Before you get the CSS URL, Adobe will ask you to assign the font to a Web Project. Once you select or create the Adobe Web Project, click Create or Save to get the CSS URL. You should see something like this: 

Simply copy and paste this into the CSS URL field for Beefree. The rest of the setup occurs directly in Beefree. You may want to refer to the Adobe Fonts recommended font stack to help build your own. 

Notes

Please note that Beefree only supports standard font weights (100-950).

We released our original custom font feature in 2016. However, the builder didn't support font weights until March 2022. Originally, Beefree only supported regular and bold font weights. We expanded support for font weights in June 2023. This expansion changed the workflow for importing custom fonts.

You can continue to use any fonts you imported to Beefree prior to June 2023. However, you may be missing font weight options, even if they are listed in the stylesheet. You can delete and re-import your custom fonts using the new workflow to use more font weights.

Default fonts in Beefree

Here's a list of the default fonts that you have available in your Beefree account. This list also includes the corresponding font stacks we've built: