︎
ADD FONT TO CARGO

To add fonts to Cargo:
  1. Add the font files to the file upload section in Cargo. Add woff, woff2 and otf and ttf if possible, just to be safe as some browsers don’t support certain formats
  2. Add this code to “Custom CSS”
  3. Customise the name (here it’s “Sabon Italic”) and URL for the font files as needed (click on the uploaded font file and copy the URL from there)
  4. Keep font style and weight as specified below (regular and 400). Add a new @font-face record for each weight of the font
@font-face {
    font-family:“Sabon Italic”;
    src:url(“https://files.cargocollective.com/c639870/sabon-italic.woff2”) format(“woff2”),
        url(“https://files.cargocollective.com/c639870/sabon-italic.woff”) format(“woff”),
        url(“https://files.cargocollective.com/c639870/sabon-italic.otf”) format(“opentype”);
    font-style:normal;
    font-weight:400;
}

5. Once you have added the code to the Custom CSS panel, go to the typography panel. When clicking on each heading (Bodycopy, H1, H2, Small) you will notice an Edit CSS button in the bottom right corner. Click that button an add the name of the newly uploaded typeface into the code where it reads ‘font-family’. Remeber to also change the font style accoring to your preference.

[data-predefined-style=”true] h1 {
font-family: "Sabon Italic", Icons;
    font-style: italic;
    font-weight: 400;
    padding: 0;
    margin: 0;
    font-size: 5.5rem;
    line-height: 1;
    color: rgba(0, 0, 0, 1);
    }

For more info and syntax, look at these:
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
https://support.cargo.site/Using-Your-Own-Webfonts