Set up font libraries and font stacks

    DX8 allows you to manage font libraries and font stacks used by your website. There are two steps to the process:

    1. Set up your font libraries
    2. Set up your font stacks

    When setting up font libraries you have three options:

    1. Upload fonts. You can upload fonts to your website. When you upload a font it will be hosted with your website in the Cohesion directory. You must ensure that you have the appropriate licence to host and serve the font. 
    2. Use web fonts. You can import fonts from web font providers like Google fonts. These fonts are hosted by the provider so all you need to do is add the URL of the font.
    3. Use system fonts. These are fonts that will usually be available on your users device so there's no need for you to provide the font. For example, Arial is a system font and the most widely supported. If using system fonts you can jump straight to Set up font your stacks as there are no fonts to upload or import. 

    Uploading or importing multiple web fonts will slow down your website loading speed. Only upload or import web fonts that you will use. Remove any fonts you are not using.

    Upload fonts

    To upload fonts:

    1. Navigate to DX8 > Website settings > Font libraries
    2. Enter a name in the Label field
    3. Click on the Upload.zip button and select your .zip file containing your prepared fonts. The .zip should include your font in EOT, TTF, WOFF and WOFF2 formats. Successfully uploaded font files will be marked with a green tick
    4. Click Save

    Upload-fonts.png

    To convert a font into EOT, TTF, WOFF and WOFF2 formats there are a number of online converters available.

    https://transfonter.org
    https://www.fontsquirrel.com/tools/webfont-generator
    https://www.web-font-generator.com

    Import web fonts

    To import a web font:

    1. Enter a name in the Label field
    2. Enter the URL of the web font in the @import field. As an example, the URL should be formatted like this: https://fonts.googleapis.com/css?family=Poppins:300,400,600
    3. Click Save

    Web-fonts.png

    Set up your font stacks

    Once you've uploaded or imported your fonts you need to set up your font stacks.

    To set up your font stacks for imported or uploaded fonts (Highlighted with pink dashed line):

    1. Click on the blue button Add web font stack
    2. Enter a name in the Label field. You will use this name to identify and select your font throughout DX8
    3. Enter your font stack in the Font stack fieldYour Font stack should be formatted like this: 'Poppins', sans-serif;
    4. If you want to apply font smoothing, Toggle on the Firefox and Webkit toggles
    5. Click Save

    To set up a system font stack (Highlighted with blue dashed line):

    1. Click on the arrow on the blue button
    2. Click on Add system font stack
    3. A new system font stack row will be added to your form. DX8 provides drop down which includes different system font stacks
    4. In the drop-down click on the system font stack you want to add
    5. Click Save

    Font-stacks.png

     

     

    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket