RebelMouse Talk to Us
Fonts on RebelMouse

A guide to understanding the Font element and custom fonts

In our Layout & Design Tool, you can use the Font element to determine which fonts are rendered on your site.


Within the Font element, you can configure your site's fonts using the Properties card, including font name, weight, priority, and style.

You also have the ability to set a font's Unicode Range. This determines the specific range of characters that define the font. Click here to learn more.

When it comes to loading priority for a font, you have two different options that you can choose from:

Load Blocking: This option will load all of the fonts on a page immediately.

Optimized (Lazy Load): This option loads fonts only when the element enters a user's viewport. This option is ideal to optimize the performance of the page.

Whether you choose Load Blocking or Optimized (Lazy Load) to prioritize the loading of your fonts, either option will help improve the performance of your site.

In your site's Global Settings, you can use Google Fonts and Typekit to access fonts that require extra CSS. But this can often slow down your site's load time. Here's an example of a page using Google Fonts that's been tested for performance using Google's PageSpeed Insights tool:

Now, here's the same page using our Font element with its loading priority set to Load Blocking:

And here's the same page again with our Font element's loading priority set to Optimized (Lazy Load):

Custom Fonts

In Layout & Design Tool's Global Settings, we have a lot of options to choose from between Google Fonts and Typekit, but sometimes you just have to use another font that's not available from those two sources. Maybe it's due to your corporate style guide, but don't sweat it — we've got you covered.

How to Use Custom Fonts

First, host your font on Amazon S3. This is a necessary step to implement your custom font on your RebelMouse-powered site.

Log in to your Amazon S3 account, select or create an appropriate folder for your font, and then upload the font files.

Next, add your custom font to your Top Bar using a Header Code element.

Go to the Layout & Design Tool in the left-hand navigation menu. Open up the Top Bar for your site, click on + ADD ELEMENT in the toolbar, and select the Header Code element:

It should look like this:

In the Properties card to the right, you need to paste your code using the following format:

<style> @font-face { font-family: 'Intro'; src: url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/Intro/Intro.eot'); src: url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/Intro/Intro.eot?#iefix') format('embedded-opentype'), url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/Intro/Intro.woff2') format('woff2'), url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/Intro/Intro.woff') format('woff'), url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/Intro/Intro.ttf') format('truetype'), url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/Intro/Intro.svg#myfont') format('svg'); } @font-face { font-family: 'IntroBold'; src: url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/IntroBold/IntroBold.eot'); src: url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/IntroBold/IntroBold.eot?#iefix') format('embedded-opentype'), url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/IntroBold/IntroBold.woff2') format('woff2'), url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/IntroBold/IntroBold.woff') format('woff'), url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/IntroBold/IntroBold.ttf') format('truetype'), url('//s3.amazonaws.com/partners.rebelmouse.com/DogVacay/IntroBold/IntroBold.svg#Myfont') format('svg'); } </style>

Note: Bear in mind that the above code is only an example. You need to update the font family and source URLs to match the custom font you uploaded to your Amazon S3 account.

Finally, start using your new font!

Now you can use the font(s) you've added to your site in your site's Global Settings, and in any custom CSS you want to implement across any of your pages.

Note: Implementing custom fonts using this method won't allow you to apply any weighting to them. So if you'd like to use a bolder or lighter version of your custom font, you'll need to do it manually in the font-family property.

Here's an example:

Fonts on AMP

AMP pages require CSS styling for fonts. You cannot use the Font element on AMP articles.

Learn More About Fonts on RebelMouse

If you have any questions about how to implement and style fonts on RebelMouse, email support@rebelmouse.com or talk to your account manager today.

What Is RebelMouse?
Request a Proposal
The Most Secure CMS of 2022
Featured

The Most Secure CMS of 2022

Why RebelMouse Is the Most Secure CMS on the Web

Delivering a secure, high-performing environment with extreme reliability is essential to all of our clients at RebelMouse. We only use industry-leading, reliable approaches to host our infrastructure. This ensures maximum stability and security for all of our clients’ data. Here are just some of the reasons we’re able to maintain a hard-bodied product that’s flexible, too.

Keep reading... Show less
Google Made Major Changes to Its Formula for Page Speed. Here’s What to Do About It in 2022.
Rebel Insights

Google Made Major Changes to Its Formula for Page Speed. Here’s What to Do About It in 2022.

Make sure your site is set up for success in 2022.

In the spring of 2020, Google let the world know that its Core Web Vitals would become the new benchmark for measuring a site's performance in its search results, known as the page experience update. Fast forward to more than a year later in August 2021 when, after much anticipation, Google's page experience update became official.

Since its rollout, developers have felt the impact of how their publishing platforms stack up against the new standard. Important decisions around the architecture of your site can now make or break your site's performance in the eyes of Google.

HTTP Archive, a tracking platform that crawls the web to identify trends and record historical patterns, has revealed how top content management systems (CMS) have weathered the page experience update through the creation of its Core Web Vitals Technology Report. RebelMouse consistently outperforms major CMS platforms on Google's most critical metrics since its rollout and into 2022:

Getting superior scores on Google's performance benchmarks isn't easy, either. The Ahrefs blog analyzed Core Web Vitals data from the Chrome User Experience Report (CrUX), which is data from actual Chrome users, to see how the web stacks up against Core Web Vitals. Their study found that only 33% of sites on the web are passing Core Web Vitals.

data from Ahrefs tracked on a line chart finds that shows only 33% of sites on the web pass Google's Core Web Vitals From Ahrefs.

Luckily, performing well on Core Web Vitals is possible with thoughtful, strategic changes to your site’s codebase. Here's what you need to know and how we can help.

Keep reading... Show less
Interested in a Free Website Health Check?Check Your
Website's Health
Get Your Free Analysis Now