Graphics
      Back to home
      1. Knowledge Base
      2. Onboarding
      3. Graphics

      Custom Fonts

      How to add custom fonts into the Duel Dashboard

      While we do support custom fonts, please keep in mind that we are unable to host these fonts on our servers due to usage rights.

      Therefore, it is necessary for brands to provide web fonts or hosting your fonts and whitelisting the Duel subdomain. 

      There are 3 main methods for adding fonts, click through below for more information. 
      Google Fonts
      Adobe Fonts (Typekit)
      Self Hosted

      Google Fonts

       

      1. Navigate to https://fonts.google.com/ and find the font family you'd like to add to Duel.
      2. Select the appropriate font styles and hit the 'Selected Families' button in the top right.
      3. Scroll down to Use on the web and select the @import option, you're now ready to add these fonts into Duel. 
      4. Once you're logged into the Duel Dashboard head to:
        Members > Group Profiles > Select a group > Styles
      5. Under CustomFontURL paste in the link (bolded below) from the google fonts selector. 
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');
      6. Under BaseFontFamily paste in the text (bolded below) from the google fonts selector.
        font-family: 'Montserrat', sans-serif;
      7. Hit Save and you're done

      Be sure not to include the quotation marks or the semicolon when copying across into Duel, only the bolded sections above

      Adobe Fonts

       

       

      1. Navigate to https://fonts.adobe.com/ and find the font family you'd like to add to Duel.
      2. Select the appropriate font styles and hit '</> Add to Web Project' 
      3. Give the project a name and you're now ready to add these fonts into Duel. 
      4. Once you're logged into the Duel Dashboard head to:
        Members > Group Profiles > Select a group > Styles
      5. Under CustomFontURL paste in the link (bolded below) from Adobe Fonts. 
        <link rel="stylesheet" href="https://use.typekit.net/pqj3bgx.css">
      6. Under BaseFontFamily paste in the text (bolded below) from Adobe Fonts..
        font-family: pedestria-mvb, sans-serif;
      7. Hit Save and you're done

      Self Hosted

      If you have a custom font that is not available in the Google Fonts or Adobe Fonts libraries, you will need to provide us with the appropriate links to reference the webfont (woff) within the CSS.

      The process may vary depending on where you purchased the font license, but the method for adding it to Duel remains the same as described above.