Using custom fonts in RGE Studio

Beefree App is now RGE Studio!
The email design suite you already know and love just leveled up. We’re working hard to update our help center, but you still may see some references to the old product name.

Overview

RGE Studio lets you add custom fonts to your account. You can use them when designing both emails and pages. Your custom fonts must be hosted externally.

Email Client Support

Web fonts are only supported in some email clients. Based on our tests, web fonts work consistently in:

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

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.

Two popular email clients are missing from the list above: Gmail and Outlook.

Email clients that don't support web fonts display a fallback font instead. For more information, jump to the Font Stack section.

Adding a Custom Font

Log into your RGE Studio account and go to Settings > Styles. Scroll down to the Fonts section. Click the Add a new font button to add a custom font.

A form will open.

Form inputs

There are several required fields to set up a custom font.

Font name

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

Font CSS URL

This is the address of the CSS document. It embeds the font files and applies the CSS rules. For example, this is a Montserrat stylesheet generated by Google Fonts: https://fonts.googleapis.com/css?family=Montserrat.

Use a dedicated CSS sheet. If the CSS contains additional styles, RGE Studio may inherit them. This can cause display problems in the interface.

Google Fonts provides web fonts that work in the builder and most email clients. See Using Google Fonts below for more on this option.

Once you enter your CSS URL, we check that it's a valid stylesheet. You'll see a message that says Checking your data... while we do this. If the stylesheet is valid, new fields populate.

Font family

Most of the time, this section is not interactive. If you enter a CSS URL referring to more than one font, then this turns into a dropdown menu. 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

This section lists all font weights found in your stylesheet. Anything listed here is available for you to use in the builder. This list is for reference only. To remove a weight, modify your stylesheet directly. RGE Studio supports standard font weights (100-950).

Font stack

This is the font-family stack (CSS syntax) applied to any text using the font. Use the dropdown menu to select a font stack from fonts already available in RGE Studio. These options are based on the default and web fonts enabled for your workspace.

Font stacks allow you to define fallback fonts. Gmail and other email clients display a fallback font instead of the web font. Include a web-safe fallback, such as Arial for sans-serif or Times New Roman for serif.

Example:

Font name: Lobster

CSS URL: https://fonts.googleapis.com/css?family=Lobster

Font Stack: 'Lobster', Georgia, Times, serif

After you click Submit, your new custom font is added to the bottom of the Custom fonts section. This appears at the top of your font settings. The preview shows the number of weights included for your custom font.

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

Modifying Custom Fonts

To view a custom font's existing settings, click its font card at any time. To change the settings, delete the font and then re-import it.

To delete a custom font, hover over the checkmark icon. It changes to an X to indicate the delete action.

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

Using Google Fonts

Google Fonts provides a free catalog of ready-to-use web fonts. To use a Google Font in RGE Studio, copy the HREF content from the widget, as shown below.

Paste this into the CSS URL field in RGE Studio. The rest of the setup happens directly in RGE Studio. You can refer to the Google Fonts recommended font stack to help build your own.

Using Adobe Fonts

To use Adobe fonts in RGE Studio, go to fonts.adobe.com (formerly Typekit) to find the font library and browse font selections.

Once you locate your preferred font, activate it.

Click the </> icon. Adobe will ask you to assign the font to a Web Project before you get the CSS URL. Select or create a Web Project, then click Create or Save to get the CSS URL. You should see something like this:

Paste this into the CSS URL field in RGE Studio. The rest of the setup happens directly in RGE Studio. You can refer to the Adobe Fonts recommended font stack to help build your own.

Default fonts in RGE Studio

Here are the default fonts available in your RGE Studio account, along with the font stacks we've built for each: