Articles on: Custom extensions

How to connect any font to Unicorn Platform

Unicorn Platform provides the 150 most popular fonts from Google Fonts library by default. You can connect each of them easily in the Website Settings.

However, if none of the default fonts fit your needs, you can connect a custom font by using CSS code.

In this guide, you will learn how to connect any font from Google Fonts library, or a self-hosted font.

Google Fonts homepage

Google Fonts

Google Fonts is a huge collection of free and open-source fonts families. Thanks to the Google Fonts API, the process of connecting their fonts is as easy as copy/pasting a few lines of code.

Step 1/5

Pick any font and select the required font styles. Then, click on the menu at the top right corner:

Select the font styles and open the menu

Step 2/5

Copy the provided code snippet and paste it into your Website Settings > Custom code > <head> section:

The code snippet from Google Fonts

Step 3/5

Copy this code:

<style>
.comps.custom_fonts.live_website *{
	font-family: "Hubballi" !important;
}

.comps.custom_fonts.live_website h1, 
.comps.custom_fonts.live_website h2, 
.comps.custom_fonts.live_website h3, 
.comps.custom_fonts.live_website h4, 
.comps.custom_fonts.live_website h5, 
.comps.custom_fonts.live_website h6 {
	font-family: "Hubballi" !important;
}
</style>

Step 4/5

Paste it into the Website Settings > Custom code > <head> as well:

The pasted code

Step 5/5

In the code, replace the placeholder fonts with your own font family.

You can find the font family name in the Google Fonts menu:

The name of your font family

Replace these parts with your font family name

Make sure to keep the !important; part.

Done!

Open the live version of your website to see the results.

Self-hosted fonts

If you would like to connect a font that is not on Google Fonts, you can do it with a different custom code. But first, you need to upload the required font variations to a file hosting and get the source URLs.

Step 1/3

Copy this code:

<style>
@font-face {
	font-family: 'gotham-rounded-light';
	src: url('https://ucarecdn.com/aaadbc48-2a06-4e47-94a0-bcacc47c60ed/GothamRoundedLight.otf') format('opentype');
}
@font-face {
	font-family: 'gotham-rounded-bold';
	src: url('https://ucarecdn.com/bd4b1562-83a0-4f0b-963e-d604cafe4315/GothamRoundedBold.otf') format('opentype');
}
.comps.custom_fonts.live_website *{
	font-family: "gotham-rounded-light" !important;
}

.comps.custom_fonts.live_website h1, 
.comps.custom_fonts.live_website h2, 
.comps.custom_fonts.live_website h3, 
.comps.custom_fonts.live_website h4, 
.comps.custom_fonts.live_website h5, 
.comps.custom_fonts.live_website h6 {
	font-family: "gotham-rounded-bold" !important;
}
</style>

Step 2/3

Paste it into the Website Settings > Custom code > <head> section:

The pasted code

Step 3/3

Replace the source URLs with your own ones (make sure to keep the quotes):

The URLs that you need to replace

You should have a source URL for all required font styles. In the example code, we have 2 variations: bold and regular.

You can replace the font-family name with any other custom name:

You can change the font family name

Done!

Open the live version of your website to see the results.

Updated on: 25/03/2022

Was this article helpful?

Thank you!