Skip to main content

Setting up colors and fonts

In this article, you’ll learn how to apply colors and fonts in Onepage

Jacob avatar
Written by Jacob
Updated over 2 years ago

Onepage offers you a variety of options to customize your projects individually. Let's talk basics about fonts and colors.

Finding design options

Your page design options are findable in the bottom-left corner of the interface. Click it to proceed.

Here you see all the available options, including colors, fonts, buttons, and form styles. Let's focus on colors first.

Picking a color palette

As you might see, you're free to choose one of our pre-designed color palettes, where each is a set of matching colors for modern designs.

Select one from the list or create your own. Like this :

If you want an individual color palette and struggle to pick the right colors, we suggest you use palette generators like coolors or colorhunt

Wondering what color types are?

  • primary - used to represent primary interface elements. It's the color displayed most frequently across your page. (ex. color for the buttons)

  • secondary - used to represent secondary interface elements. It provides more ways to accent and distinguishes your product.

  • light - used for backgrounds and optional elements

  • dark - used for backgrounds and optional elements

Tip. Remember that projects share the same font and color settings. Once you change a color palette within a project, it automatically changes on every other page inside your website.

Selecting fonts

You’ll find our popular fonts in Typography. Pre-sets are specifically made to give your project a coherent look. They're awesome by default.

All the fonts in Onepage are provided by Google Fonts and are hosted locally from EU-servers, so you're on a safe side when it comes to GDPR compliance.

Creating a custom font-pair

If you want to create your own font pair, simply click "Add new font pair" and configure it on your own. Let's talk settings :

Base font - sets your default paragraph text size

Ratio - changes a multiplier that affects the size of text styles (reducing or increasing the difference in size)

Connecting a custom font-pair

If you want to use an external font (that is not on a Google Fonts library), you're able to connect it using custom code.


💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂

Did this answer your question?