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 and click "Get font" at the top right corner:

Then click "Get embed code":

Step 2/5

Copy the provided code snippet and paste it into your General Settings > <head> custom HTML code 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 General Settings > <head> custom HTML code as well:

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 General Settings > <head> custom HTML code 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

If you are using Dropbox as the hosting for the font, you need to change the link from www.dropbox.com in the URL to dl.dropboxusercontent.com. Otherwise, the link won't work and the font on the site won't be changed.

Changed Dropbox link

Done!

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

Updated on: 12/03/2024

Was this article helpful?

Thank you!