Subscribe to Our Newsletter

x

Custom Font Options

Need to implement your own custom font on your site?

We have a lot of options between Typekit and Google Fonts, but sometimes you just have to use another type 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

1. 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.

2. 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 page 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 an example. You need to update the font family and source URLs to match the custom font you uploaded to your Amazon S3 account.

3. 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.

Example:

Particle Assembler: Ads in Slideshows Now Supported

You can now insert ads between slides in a slideshow!

Monetizing users' engagement and page views is pivotal to most digital businesses, and our Particle Assembler has been an invaluable tool in helping RebelMouse clients to insert native ads seamlessly into their content. Now we've taken this functionality one step further by introducing support for ads between slides in Assembler's slideshow layout.

Keep reading... Show less

Inside RebelMouse’s Quality Assurance Operations

How We've Perfected Stress-Free Publishing

At RebelMouse, we like to refer to our enterprise publishing platform as "lean tech." Most publishers have a natural inclination to start doubling down on teams of developers who try to build unique experiences to help stand out above the noise. But they should actually be doing the opposite: Lean tech is the preferred way to cut through content saturation. By allowing RebelMouse to obsess over your product, content producers, editors, managers, and everyone in between can focus on creating quality content and taking advantage of opportunities to leverage distributive publishing strategies that create real revenue growth.

One of the major reasons we're able to maintain a lean tech environment is thanks to our approach to quality assurance (QA). We make updates to our platform daily to ensure our clients always have access to the most robust, high-performing, and secure version of our platform. Behind the scenes, this means having a solid QA structure that's efficient, creates less bugs, and catches the ones that do pop up before they go live. It's a system of checks and balances that's hard and costly to replicate on a custom CMS. Here's a glimpse into how it works.

Our Tech Stack Toolbox

  • Cucumber
  • Java
  • Junit
  • Maven
  • Selenium WebDriver
  • TeamCity
  • Zalenium (Selenium Grid)

Our Checks and Balances Workflow

Automated Regression Testing Cycle

The Lifecycle of a Product Update

When an update is first made to RebelMouse, TeamCity immediately triggers the start of automated tests to review integrity.

TeamCity Build

TeamCity Agent

The tests run in parallel on TeamCity's Build Agent. Next, Zalenium creates docker containers with browsers that matches the count of parallel threads. An Allure report is then generated from the test results, which shows the state of the application after the update.

Allure Report Pass

If a test doesn't complete successfully, the testing framework receives a video with a failed test and attaches it to the Allure report.

Allure Report Issue

Based on the report analysis, a QA specialist will create a "bug" ticket in our product management software to address the issue if needed. Then, information about the bug is immediately sent to the project manager and we begin the process of correcting the problem.

The media powerhouses we power can publish with confidence knowing that any product issues that arise are met with a tried-and-true process to fix the problem with little-to-no disturbance to their workflow. If you have any questions about this process, please email support@rebelmouse.com.

Related Articles

Related Articles Around the Web

The Difference Between Subdomains and Subfolders

If you're looking to have RebelMouse power only a portion of your site, you can set up either a subdomain or subfolder.

If you're looking to have RebelMouse power only a portion of your site, you can set up either a subdomain or subfolder. This is a choice your team will have to make as you replatform and optimize your content, so it's important to understand the distinction between the two.

Subdomains

A subdomain is a subdivision of an existing domain: For example, apis.rebelmouse.com (subdomain of rebelmouse.com) and hub.united.com (subdomain of united.com) are both examples of subdomain structures. Launching a subdomain on RebelMouse is simple and straightforward for your tech team, and usually doesn't entail much extra work.

Subfolders

Creating a subfolder is a bit different. A subfolder is a URL structure such as FSAStore.com/learn. It's easier to think of subfolders as subsections of your site. This work generally takes about 10 service hours for our team to configure for you.

To launch a new property using a subfolder setup, RebelMouse provides you with technical strategy, direction, and advice on how to configure it properly. For search engine optimization purposes (SEO), using subfolders is the most optimal setup, but the SEO improvement can be minor. As long as the content on the main domain and subdomain interlink, there's not much to worry about if you need to use a subdomain setup. We accomplish the correct connections between both through JSON and feed integrations.

If you have any questions about the difference between subdomains and subfolders, email support@rebelmouse.com.

Related Posts vs. Posts in Assembler

Here's the difference between Related Posts and Posts in Assembler.

By using Related Posts and Posts in Assembler, you can help your audience stay engaged with your site's content and generate more traffic. Both of these features can be added to any post through Entry Editor.

When creating or editing a post, you can add a Related Posts section to the bottom of it that consists of a selection of existing posts on your site that you choose to surface. Only the main image and content headline are pulled, along with a link to the original post. This is similar to the Around the Web section that also shows up at the end of your post when you enable it from the SEO tab of Entry Editor.

Keep reading... Show less
Subscribe to Our Newsletter