Using your own Webfonts
Some webfont services require you to download webfont files and upload them to your own file storage in order to use them.
You can host these font files through Cargo’s content editor. Open a page and click on the File icon (
) in the Images menu. Upload the file and click on its file name to copy its URL:https://files.cargocollective.com/1/Chicago.woff
Use these URLs to form @font-face rules; these rules determine how your font is used inside your Cargo Site.
@font-face {
font-family: 'Chicago';
font-weight: normal;
font-style: normal;
src: url('https://files.cargocollective.com/1/Chicago.woff') format('woff');
}Each different style and weight of the font requires its own rule. If you have more than one weight and style, create multiple @font-face rules.
/* Normal weight; Normal style */
@font-face {
font-family: 'Chicago';
font-weight: normal;
font-style: normal;
src: url('https://files.cargocollective.com/1/Chicago.woff') format('woff');
}
/* Bold weight; Normal style */
@font-face {
font-family: 'Chicago';
font-weight: bold;
font-style: normal;
src: url('https://files.cargocollective.com/1/Chicago_bold.woff') format('woff');
}
/* Normal weight; Italic style */
@font-face {
font-family: 'Chicago';
font-weight: normal;
font-style: italic;
src: url('https://files.cargocollective.com/1/Chicago_italic.woff') format('woff');
}
/* Bold weight; Italic style */
@font-face {
font-family: 'Chicago';
font-weight: bold;
font-style: italic;
src: url('https://files.cargocollective.com/1/Chicago_bold_italic.woff') format('woff');
}Webfonts can come in multiple file formats. Since WOFF is well-supported on modern browsers, additional formats are generally not necessary. If you do want to include multiple webfont formats, see CSS-Tricks: Using @font-face.
Add the finished @font-face rules into your Site through the CSS Editor; you can find the CSS Editor at the bottom of the Design tab in your admin panel. Paste the @font-face rules at the top of your CSS.
Make your webfont active inside your Site by referencing it in your 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;
}