Adding custom fonts to your website/funnel and email campaigns

RevStackr gives you every Google Font as standard. But sometimes, you need your own special brand fonts (like ITC Avant Garde). This guide shows you how to add them to your website in seconds, and how to set up the "Auto-Force" system for your emails.
[ ⚔️ ASSET ATTACHMENT: CUSTOM_FONTS_MASTER_WALKTHROUGH.MP4 ]
Part 1: The Website and Funnel Method
  • Adding Fonts to your Pages: This is the easiest way to add fonts. It’s built right into the builder. 1. Open the Sites tab and click on the Website or Funnel you are building. 2. Open a page to start editing it. 3. Look at the very top-left corner of your screen. Click the icon that says Typography. 4. A menu will slide out. Click the button that says "Add Custom Font". 5. Click the upload button to pick your font file from your computer (.otf or .ttf files work best here). 6. Give your font a name you like. Click Add. 7. Now, whenever you click on text, you will see your new font waiting for you in the standard font list!
Part 2: The Email Campaign Method

Emails are a bit more complicated because apps like Gmail and Outlook are very strict. We have to use a special "Rule Book" (called CSS) to tell the email exactly what to do.

  • Preparing the Font (The .woff2 Step): Standard font files are too "heavy" for emails. We need to make them "light." 1. Go to a free website like CloudConvert or Transfonter. 2. Upload your brand font file. 3. Choose WOFF2 as the output format. This is the "lightweight" version emails love. 4. Download the new .woff2 file to your computer.
  • Uploading to your Media Library: 1. In your RevStackr dashboard, go straight to the Media Library. 2. Click the Upload File button and pick your new .woff2 files. 3. Once the file is uploaded, click on it once. 4. Click the button that says "Copy to Clipboard". This gives you the "web address" for that font. Save this address in a notepad!
  • Setting up the "Rule Book": 1. Open the Email Campaign or Template you are working on. 2. Look for the Appearance icon (it looks like a small gear or settings wheel). 3. Find the box labeled Custom CSS. 4. Copy the entire code block below and paste it into that box. 5. Replace the words YOUR_LINK_HERE with the "web addresses" you saved from your Media Library.
/* 1. DEFINE YOUR BRAND FONTS */

/* Paragraph Font */
@font-face {
  font-family: 'BrandParagraph';
  src: url('YOUR_LINK_HERE') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Headline 1 Font */
@font-face {
  font-family: 'BrandHeadline1';
  src: url('YOUR_LINK_HERE') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Headline 2 Font */
@font-face {
  font-family: 'BrandHeadline2';
  src: url('YOUR_LINK_HERE') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 2. APPLY TO SPECIFIC BUILDER ELEMENTS */

/* Force H1 to use Headline 1 Font */
h1, .el-text-heading h1 {
  font-family: 'BrandHeadline1', sans-serif !important;
}

/* Force H2 to use Headline 2 Font */
h2, .el-text-heading h2 {
  font-family: 'BrandHeadline2', sans-serif !important;
}

/* Force all standard text elements to use Paragraph Font */
p, span, .el-text-paragraph, .el-text-paragraph * {
  font-family: 'BrandParagraph', sans-serif !important;
}
Step 3: How the "Auto-Force" Works
  • Bypassing the Menus: Because these are special custom fonts, they won't show up in the normal font menu. But don't worry—the code is "watching" what you do. 1. If you click a box of text and tell the builder it is a Heading 1, the code will instantly "force" your brand font onto it. 2. If you set it as a Heading 2, it will force your second brand font. 3. If it is a normal Paragraph, it will use your paragraph font. You don't need to search for anything in a dropdown list. Just pick the "Type" of text (H1, H2, or P) and the system handles the rest.
  • The "Preview" Rule: While you are editing your email, it might still look like a normal font. This is okay! The builder does this to stay fast while you work. To see the actual branding, you must click the Preview button in the top right. This is where the custom fonts turn "on" and show you exactly how the email will look in an inbox.

The "!important" Shield

Our code uses a special command called !important. This is like a lock. It tells the email system: "I don't care what the default menus say, use MY brand font instead!" This keeps your branding perfect on every phone and computer.