Help center

Tags: No tags

Customisation

We understand the importance of brand identity. It's very common for a business to have a colour scheme or at least one brand colour. Fonts also play a key role in the identity of a business.

So we decided to make it extremely easy to customise brand colors and assign custom fonts! And it's just as fast to update them should you ever need a fresh coat of paint!

Brand colors

We based our colours on Bootstrap. These 9 colors can be applied as quick presets for text, backgrounds and button colours.

And all of them can be easily overridden to any color you desire.

For example our website's help section uses blue for the primary color, but other pages such as our home page uses purple!

Root block

All How Do Web pages have a top level block called "Root". This is where we can change the brand colors, import custom fonts, and setup default values for headings and text sizes.

Go to the tree panel and click the top level block "Root".

In most cases you'll just set this up once... in your master layout. But our system is so flexible and extensible, that you could override any of these values in some sections of your website. For example, perhaps your business uses 4 brand colors. Each category of your portfolio could use a different primary color. Or if you have a multilingual website, one locale could have a different colour scheme.

Set colours

With the Root block still selected, in the properties panel go to the Colors section. Here you can set / override any of the colors using our color picker widget. Simply drag the dots to your desired color - or enter a hexidecimal color code into the box.

Import custom fonts

Go to the Fonts section. Here you can import fonts from Google Fonts, a massive library containing nearly 1000 fonts.

Click + to add a new font.

You'll see it says #0, this is because root fonts are indexed. 0, 1, 2, 3 etc. Why? Root fonts can be assigned as a custom font for almost any block, (under Text > Font). It only references a number and not the font itself for 3 significant reasons:

  1. If at any point in the future you change your mind and decide to change the font, updating the font at the index will update all instances!
  2. Allows changing the font for certain sections of a website. 
  3. Multilingual websites: a certain locale might require a different font. Not all fonts support all character sets such as Chinese, Japanese, Cyrillic etc. Some fonts may also look better for different languages.


Click the "Custom font" button.

Related help articles

We've Updated Our Policies

We encourage you to review the relevant amended policies at www.razer.com/legal, especially the General Terms of Use & Privacy Policy.
By continuing to access the Razer sites; using Razer services or by closing this dialog, you agree to our amended policies.