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:

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

How to Control the Order of Posts on a Section Page

As an editor, you might want to manually control the order of your posts on any given section page. With our powerful CMS platform, this is as easy as dragging and dropping. Watch how it's done in the following video:

Keep reading... Show less

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

Try This New Video Preview on Facebook Instant Articles

There's a new function for Facebook Instant Articles that shows a video preview on mobile. The option has been successful for some of our clients at RebelMouse, and we want you to give it a try too!

Keep reading... Show less

How to Thrive in a World Without Ads

Mike Mallazzo, Director of Marketing at Narrativ, recently wrote a post on Medium: "Life After Ads: The recent purchase of TIME should remind publishers of the power a strong brand can wield."

He discusses how some media companies are starting to question their total reliance on digital advertising. With Facebook and Google capturing the majority of revenue in the online advertising space, Mallazzo talks about how some companies are diversifying their revenue streams with models that depend on building loyalty and trust through subscriptions and commerce content in addition to just advertising. He writes:

"Media conglomerates have rediscovered the power of brand equity, offering the most plausible hope for sustainability since the proliferation of the internet."

At RebelMouse, however, we are still seeing digital advertising work. Our clients — such as Dance Magazine — are seeing huge success with digital advertising. But what if you were a media company in a world where traditional digital advertising didn't work at all? What would you do? How would you make money and continue to grow as a company?

The key is loyalty. You can't have a brand without loyalty.

Keep reading... Show less