How can I select a font for my website?

Onepage was co-developed by designers and provides you with a set of carefully selected fonts and font pairs. These fonts are matched so that you always get a consistent and beautiful design with our templates.

With Onepage you are completely free in designing your landing pages and can add and combine your own fonts from a large font library.

This way you can adapt your landing page to the corporate identity of your company or your customers in no time.

📌 Please note: the fonts must be edited separately for each project so that other projects are not affected

Set up a font pair in Onepage

Step 1: Open editor

Open your project and start editing your page.

Step 2: Open font settings

On the bottom left, click on "Design" and then on "Typography".

Here you can either choose from our preselected font pairs or you can add a custom font pair by clicking on "Add font pair".

📌 Please note: you can also edit our preselected font pairs. Simply select the pair first and then click on "add font pair".

Step 3: Set up custom pair

Select the header and text font.

📌 Please note: you can have up to 7 fonts in the pair. Simply click on "add extra font".

Step 4: Select font properties

You can customize the font, by changing these parameters.

Step 5: Save and update

Make sure to click "Save" and "Update".

Use the font in your text

After the font pair is set up, you can the fonts in your texts.

Simply select the text and pick a font 🙂

Import an external font

The external font must be hosted on a dedicated service. You must receive a link to the font and embed via Custom Code in Onepage.

This method is for advanced users, be prepared to do simple coding.

⚠️ Important: The use of external fonts is subject to copyright and licence laws.

You are responsible for checking whether by using the fonts you are infringing the rights of third parties, such as copyright, and that you have the appropriate licences or permissions for the use of fonts in your projects.

The use of custom code can affect the speed of your site. Please use it at your own risk.

Step 1: Preparation

Before you start, go to Onepage and select the "System" font, otherwise the custom code will not work.

If you wish, you can add some additional fonts to the "system" font pair, which you will be able to use. Simply click on "add font pair"

Step 2: Find a suitable font

Search the internet for a suitable font.

Here are some example services:

Step 3: Get the import URL and font name.

Now you need to get the import URL and font name.

An import URL is a web address (URL) of a style file that is loaded into your project using the @import rule. The URL usually refers to an external stylesheet, which contains the links to the font files.

This is what an import URL from Google Fonts looks like, for example. This refers to the font ‘Montserrat’:

https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap

Step 4: Prepare the custom code

You can import up to 2 fonts.

This is our custom code, which you need to adjust (Click to expand).

@import url("IMPORT_URL");
@import url("IMPORT_URL2");


.con-kit-page{
 --font-kit-header-font: 'FONT_NAME_HEADER', sans-serif;
 --font-kit-header-font-weight: '500';
 --font-kit-text-font: 'FONT_NAME_TEXT', sans-serif;
 --font-kit-text-font-weight: '500';
 }

 .con-kit-component-header .con-kit-quark-paragraph{
 font-weight: 500;
 }

Replace the value IMPORT_URL with the import URL, which you already copied. Do not delete the quotation marks ("").
Replace the value IMPORT_URL2 with a second import URL, in case you want to have two fonts. Do not delete the quotation marks ("").
Replace FONT_NAME_HEADER with a font name. This font will be used for the header and title texts.
Replace FONT_NAME_TEXT with a font name. This font will be used for all other texts.

Here is an example code, which will import 2 fonts from Google Fonts: Amita and Laila (Click to expand).

@import url("https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap");


.con-kit-page{
 --font-kit-header-font: 'Amita', sans-serif;
 --font-kit-header-font-weight: '500';
 --font-kit-text-font: 'Laila', sans-serif;
 --font-kit-text-font-weight: '500';
 }

 .con-kit-component-header .con-kit-quark-paragraph{
 font-weight: 500;
 }

Step 5: Add code in Onepage

⚠️ Important: errors in custom code may crash your editor. Please create a copy of your project first, or save it as a template. This will ensure you have a backup.

Onepage does not take responsibility for any errors caused by custom code.

Click on "Settings" ➡️ "Site settings" ➡️ "Custom Code" and add the code in the <Styles> section:

Step 6: Save and Update.

Make sure to click "Save" and "Update".

Frequently asked questions and solutions

Is it possible to upload my custom font directly to Onepage?

No, we currently don`t support this.

Why is my page page loading significantly longer, after I have added the custom font?

Custom font is loaded from an external host. Depending on your internet connection to the host, it takes some time to load. That's why we recommend using a reliable host.

How do I create my own templates and where can I edit them?

Duplicating projects / pages / sections

How to integrate custom code into a project or page

💡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! 🙂