Using custom fonts in Beefree
BEE Pro becomes Beefree
We're still the same design suite you know and love, just with a new name. Our team is working hard to update our documentation, but you might still see some information or screenshots that are out of date.
This article applies to the Team and Enterprise plans.
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.
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
As you can see from the list above, there are a couple of very popular email clients missing from the list. Specifically...
Gmail does not support Web fonts, including Google fonts (strange, indeed!). However, Gmail supports a small selection of web fonts (Google Sans and Roboto).
Please note that Outlook 2007/2010/2013/2016 is not compatible with any custom or web fonts. It only supports traditional web-safe fonts. Sometimes other fonts may display if they are physically installed on the computer. Use the font stack to define which font the design should fall back to (see below).
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.
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.
This URL must be delivered on the HTTPS protocol, with a valid SSL certificate. Also, Policy CORS must be enabled in the host to deliver the font files.
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.
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.
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.
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.
Font name: Lobster
Font Stack: 'Lobster', Georgia, Times, serif
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.
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.
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.
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:
|Font Name||Font stack|
|Arial||Arial, 'Helvetica Neue', Helvetica, sans-serif|
|Courier||'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace|
|Georgia||Georgia, Times, 'Times New Roman', serif|
|Helvetica||'Helvetica Neue', Helvetica, Arial, sans-serif|
|Lucida Sans||'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Geneva, Verdana, sans-serif|
|Tahoma||Tahoma, Verdana, Segoe, sans-serif|
|Times New Roman||TimesNewRoman, 'Times New Roman', Times, Beskerville, Georgia, serif|
|Trebuchet MS||'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif|
|Verdana||Verdana, Geneva, sans-serif|
|ヒラギノ角ゴ Pro W3||ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro,Osaka, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif|
|メイリオ||メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro,Osaka, sans-serif|
|Abril Fatface||'Abril Fatface', Arial, 'Helvetica Neue', Helvetica, sans-serif|
|Bitter||'Bitter', Georgia, Times, 'Times New Roman', serif|
|Cabin||'Cabin', Arial, 'Helvetica Neue', Helvetica, sans-serif|
|Droid Serif||'Droid Serif', Georgia, Times, 'Times New Roman', serif|
|Lato||'Lato', Tahoma, Verdana, Segoe, sans-serif|
|Open Sans||'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif|
|Roboto||'Roboto', Tahoma, Verdana, Segoe, sans-serif|
|Source Sans Pro||'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif|
|Merriwheater||'Merriwheater', 'Georgia', serif|
|Montserrat||'Montserrat', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif|
|Nunito||'Nunito', Arial, 'Helvetica Neue', Helvetica, sans-serif|
|Oswald||'Oswald', Arial, 'Helvetica Neue', Helvetica, sans-serif|
|Oxygen||'Oxygen', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif|
|Permanent Marker||'Permanent Marker', Impact, Charcoal, sans-serif|
|Roboto Slab||'Roboto Slab', Arial, 'Helvetica Neue', Helvetica, sans-serif|
|Ubuntu||'Ubuntu', Tahoma, Verdana, Segoe, sans-serif|
|Alegreya||'Alegreya', 'Trebuchet MS', Helvetica, sans-serif|
|Arvo||'Arvo', 'Courier New', Courier, monospace|
|Catamaran||'Catamaran', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif|
|Chivo||'Chivo', Arial, Helvetica, sans-serif|
|Cormorant Garamond||'Cormorant Garamond', 'Times New Roman', Times, serif|
|Dosis||'Dosis', Arial, Helvetica, sans-serif|
|Fira Sans||'Fira Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif|
|Lora||'Lora', Georgia, serif|
|Monda||'Monda', 'Courier New', Courier, monospace|
|Noto Sans||'Noto Sans', 'Trebuchet MS', Helvetica, sans-serif|
|Noto Serif||'Noto Serif', Georgia, serif|
|Playfair Display||'Playfair Display', Georgia, serif|
|Poppins||'Poppins', Arial, Helvetica, sans-serif|
|Quattrocento||'Quattrocento', 'Trebuchet MS', Helvetica, sans-serif|
|Quattrocento Sans||'Quattrocento Sans', Georgia, serif|
|Questrial||'Questrial', 'Trebuchet MS', Helvetica, sans-serif|
|Raleway||'Raleway', 'Trebuchet MS', Helvetica, sans-serif|
|Rubik||'Rubik', 'Trebuchet MS', Helvetica, sans-serif|
|Ruda||'Ruda', 'Courier New', Courier, monospace|
|Shrikhand||'Shrikhand', Impact, Charcoal, sans-serif|
|Sintony||'Sintony', 'Courier New', Courier, monospace|
|Varela Round||'Varela Round', 'Trebuchet MS', Helvetica, sans-serif|
|Work Sans||'Work Sans', 'Trebuchet MS', Helvetica, sans-serif|
If you have any questions, feel free to contact us.