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.
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':
It will look like this:
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:
