Add custom font in cargo collective website

Table of Contents

Add Custom font in Cargo Site

Do you want to add custom fonts on your cargo site? Custom fonts can give your site a unique look and improve readability, making it more appealing to visitors.

Using different fonts can enhance your site’s typography and overall user experience. Plus, it helps create a distinct brand identity, making your cargo site stand out from the rest.

With custom fonts, you can choose styles that match your brand personality and make your content more engaging. This can encourage visitors to spend more time exploring your cargo site and interacting with its content.

Now, let’s explore how to add custom fonts to your Cargo site. Follow the steps mentioned below

How to get custom fonts?

Finding custom fonts for your Cargo site is easier than ever before. You can discover a wide range of high-quality fonts for free from various sources like Google Fonts, and Adobe Fonts.

If you’re unsure about combining fonts, tools like Font Pair can assist you in pairing complementary Google fonts seamlessly.

When selecting fonts, keep in mind that using too many custom fonts can slow down your website. To maintain a consistent design, opt for two fonts and use them consistently throughout your site.

Login to Cargo and add a page

1. First log into your cargo website.

2. Add a new page in the builder. If you do not know here you can read the article on how to add page .

how to add page in cargo collective

Upload the font and copy the font URL

1. To use any font that you have downloaded from any website first you need to upload them to the file storage of the cargo content editor to use them.

2. To host the file go to any page which you have created in the second step and click on the File icon 📁 in the Images menu.

3. And then upload the font file which you use in the website and after that click on its file name to copy its URL so that you can use that URL in the CSS editor.

Add custom CSS to import font

1. After that go to the Design tab of the cargo panel, scroll a little bit you will find CSS Editor

2. Then paste the code mentioned below. This code will change the font of every H1 heading to the Poppins font.

@font-face {
  font-family: 'poppins-font';
  src: URL('https://files.cargocollective.com/c1560239/Poppins-Regular.ttf') format('truetype');
}

h1{
	font-family: 'poppins-font' !important;
}

This code snippet is a CSS (Cascading Style Sheets) rule that defines a custom font called “Poppins” and applies it to the heading level 1 (h1) elements on a webpage. Let’s break it down:

@font-face: This is a CSS at-rule used to define custom fonts and their sources.
font-family: 'poppins-font';: This line defines the name of the custom font as “Poppins-font”.
src: URL('https://files.cargocollective.com/c1560239/Poppins-Regular.ttf') format('truetype');: This specifies the source of the font file. In this case, it’s a TrueType font (TTF) file located at the provided URL.
h1 { font-family: 'poppins-font' !important; }: This CSS rule applies the custom font “poppins-font” to all heading level 1 (h1) elements on the webpage. The !important declaration ensures that this font is prioritized over any other font styles applied to h1 elements.

Now we have successfully added a custom font to the Cargo Collective site builder.

Thanks for reading this article.

Cheers✌

Hey, wait a minute 🤯,

Do you know how to connect custom domains from other hosting providers like GoDaddy to Cargo. Click here to read the article on that.

Add custom font in cargo collective website