Close

Copyright © RebelMouse 2019

Follow Us:

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:

RebelMouse CEO: Reimagining Diversity “Starts in the Office”

Why women, minorities, and the LGBTQ+ community will restructure workplace norms

Entering a new decade means a new opportunity to change how we approach diversity. In a joint interview alongside Leanne Pittsford of Lesbians Who Tech, RebelMouse founder and CEO Andrea Breanna said that the only way to fight patriarchal dominance is to encourage and nurture more women, minorities, and members of the LGBTQ+ community in the workplace, particularly in tech.

Over half of RebelMouse's employees are women or identify as LGBTQ. Read our full diversity and inclusion report here.

Check out the full video below.

Related Articles

Publishers No Longer Have to Submit Their Site to Google News

Google's Publisher Center creates new opportunities for audience growth

Just before the start of the next decade, Google announced an important change to its Google News offering with the launch of Google Publisher Center. The new interface merges Google News Producer and Google News Publisher into one to streamline the partnership process for publishers.

Overall, the change should make it easier for publishers to manage their Google News settings, including updating themes, directing URLs to section pages, and configuring user permissions. Read the full list of features here.

Keep reading...

How to Find Work-Life Balance as a Remote Employee

Tips from our CEO on making the most of an office-free lifestyle

Working from home is becoming increasingly popular, with an estimated 66% of companies now allowing remote work and 16% operating completely office-free. RebelMouse is one of those fully remote companies, and over the years we've mastered how to stay close to each other despite being spread across more than a dozen countries. We believe working remotely is good for both our personal lives and our productivity. Read more about this here.

Still, working free from the shackles of an office environment doesn't mean every day is a dance party in your pajamas from 9 to 5. Working from home comes with its own set of challenges just like any other job.

Keep reading...
Subscribe to Our Newsletter