RebelMouse Talk to Us
My font is not on google fonts OR typekit. Now what?

Need to implement your own custom font in your site?


We have a LOT of options with typekit and google fonts, but sometimes you just have to use another type that's not available in those two sources. Maybe it's due to brand manual, or just company requirements -- don't sweat it, we've got you covered.

Step 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 appropiate folder (anything you want to keep it tidy) and then upload the font files.

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Ffe05162a-9176-43f3-8fbb-0388c8eb77c6%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=382&h=ed6d6cbdd6b86be6c95b321e06061e49a1c8af1059a5b1d8ff129909f674cb03&size=980x&c=1933874511 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Ffe05162a-9176-43f3-8fbb-0388c8eb77c6%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D382%26h%3Ded6d6cbdd6b86be6c95b321e06061e49a1c8af1059a5b1d8ff129909f674cb03%26size%3D980x%26c%3D1933874511%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

Step 2: Add them to your Top Bar as Header Code

In the Layout & Design tool:

Go to the Top Bar page and add the element 'Header Code':

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F00975f98-7a6c-499d-884f-84068ee2de2b%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=767&h=eaef6e2f1f780a1e496bcacd516647def97c4e8241a06e366c3c4e5e46601086&size=980x&c=1568218462 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F00975f98-7a6c-499d-884f-84068ee2de2b%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D767%26h%3Deaef6e2f1f780a1e496bcacd516647def97c4e8241a06e366c3c4e5e46601086%26size%3D980x%26c%3D1568218462%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

It will look like this:

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Fe316dcc2-ffe5-4b15-af9a-67b1cf35e8ca%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=128&h=5fd2b243577174e4e00a6779440689675eef36d7292eab51086f2a9e79ab915a&size=980x&c=2650433045 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Fe316dcc2-ffe5-4b15-af9a-67b1cf35e8ca%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D128%26h%3D5fd2b243577174e4e00a6779440689675eef36d7292eab51086f2a9e79ab915a%26size%3D980x%26c%3D2650433045%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

In the empty box in the right side, you need to input the following code:


Please bear in mind that this is an example, so you should update the font-family value and the source urls.

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

Step 3: Start using it!

Now you can use this fonts you've added in your site's Global Settings and on any custom CSS you want to implement on your pages.

Side Note: these implementation won't allow you to apply a weight variant, so if you'd like to use a bolder or lighter version of the custom font, you'll need to do it manually in the font-family property.

Example:

[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F679c51c6-e363-4e8d-a97f-acab02cf014c%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=1002&h=3621180a4d6502b94f6ead110ef7867bc6bd2424d5665e6c7e6cb9a849db6fbe&size=980x&c=818985044 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F679c51c6-e363-4e8d-a97f-acab02cf014c%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D1002%26h%3D3621180a4d6502b94f6ead110ef7867bc6bd2424d5665e6c7e6cb9a849db6fbe%26size%3D980x%26c%3D818985044%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]

Build on a Better PlatformReady to See More?
Request a Proposal
Learn More About RebelMouse’s High-Performing Infrastructure
Featured

Learn More About RebelMouse’s High-Performing Infrastructure

To ensure every site powered by RebelMouse is high performing, secure, and optimized for user experience, we only use the best and most reliable methods to host our infrastructure. Here's a detailed look at some of the services and security measures we use every day to secure maximum stability and security for each of our sites.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal
An Important Note on Site Quality From Google’s Search Expert
Rebel Insights

An Important Note on Site Quality From Google’s Search Expert

Do you ever wonder if a few typos can impact your site’s search performance? According to Google’s Search Advocate John Mueller, it takes more than just a few grammatical missteps for Google’s crawler to determine your site’s quality.

During a New Year’s Eve Office Hours hangout, Mueller said that if certain portions of a website are deemed low quality, it can negatively impact the site’s search ranking overall. A good example of this is a site that has different language versions within the same domain. If the site has a French-language version that is made up of quality content, but the English translation isn’t up to the same standard, the ranking of the French version of the site could be negatively impacted.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal