Using Hosted Webfonts
Many webfont hosting services will require to place an embed code into your website in order to use their fonts. This is the model followed by Adobe Fonts, Typotheque, Google Fonts, and others. Each webfont service will have its own process for choosing fonts and generating the correct embed code.
For example, this article will use Adobe Fonts to embed the font “Chicago”
After you’ve picked your fonts, Adobe Fonts will generate an embed code to place into your website. Place it into your Cargo Site through the Custom HTML section, which is accessible at the bottom of the Design tab in your admin panel.
<link rel="stylesheet" href="https://use.typekit.net/abc123.css">
This will make the webfont usable inside your Site’s stylesheet.
Make your webfont active inside your website by referencing it in your Site’s CSS. There are CSS rules that correspond to each type category shown inside the Design tab:
[data-predefined-style="true"] bodycopy
[data-predefined-style="true"] h1
[data-predefined-style="true"] h2
[data-predefined-style="true"] small
Find these rules inside your CSS and set their font-family properties to use your newly-embedded webfont. Place the name of the font inside double quotes. Keep “Icons” at the end of the font-family list in order to make use of Cargo’s built-in social media icons.
[data-predefined-style="true"] bodycopy {
font-size: 2rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
font-family: "Chicago", Icons;
font-style: normal;
line-height: 1.2;
}