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 Typekit, Typotheque, Adobe Edge Web Fonts, 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 Typekit to embed the font “Chicago”

After the code has been generated, Typekit will generate a two-line 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.

<script type="text/javascript" src="http://use.typekit.com/abc123.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

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"] main
[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"] main {
	font-size: 2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Chicago", Icons;
	font-style: normal;
	line-height: 1.2;