How can I apply SS01 (Style set 1) to my website using the webfont "Due Studio | Lay Grotesk" in Webflow?

Published on
September 22, 2023

To apply SS01 (Style Set 1) to your website using the webfont "Due Studio | Lay Grotesk" in Webflow, you can follow these steps:

  1. Upload the font files to your Webflow project:

    • Go to the Webflow Designer, click on the "Fonts" tab in the left sidebar.
    • Click on the "+ Add Fonts" button to upload your font files.
    • Select the font format (e.g., OTF or TTF) and upload the font files for the "Due Studio | Lay Grotesk" font.
  2. Create a new font style:

    • In the "Fonts" tab, click on the "+ Create New Style" button.
    • Enter a name for the font style, such as "Due Studio SS01".
    • Choose the font family "Due Studio | Lay Grotesk".
    • Specify the weight and style (e.g., regular, bold, italic) for the SS01 style set. Note that the availability of style sets may depend on the font file you uploaded.
  3. Apply the font style to your website elements:

    • In the Webflow Designer, select the element you want to apply the font to.
    • In the right sidebar, go to the "Typography" section.
    • Click on the "Font Family" dropdown and select the "Due Studio SS01" font style you created earlier.
    • Adjust the font size, line height, letter spacing, and other typography settings as desired.
  4. Apply the font style to SS01-specific elements:

    • To apply the SS01 style set to specific elements or text, you'll need to use custom code.
    • Select the element or text you want to apply the SS01 style to.
    • Go to the Settings tab in the right sidebar and scroll down to the "Custom Code" section.
    • In the "Head Code" field, enter the CSS code to apply the SS01 style set. For example, if the SS01 style set is accessed using a specific CSS class like .ss01, you would add the CSS code .ss01 { font-feature-settings: "ss01"; } to enable the SS01 style set.
  5. Publish your website:

    • Once you've applied the SS01 style set to your desired elements, click the "Publish" button in the top-right corner of the Webflow Designer.
    • Your website will now be live with the "Due Studio | Lay Grotesk" font and the SS01 style set applied.

Remember, it's crucial to check the licensing and usage rights for any font you plan to use on your website. Ensure you have the proper permissions and licenses to use the "Due Studio | Lay Grotesk" font.

Additional Questions:

  1. How do I upload custom fonts to Webflow?
  2. Can I use multiple webfonts in Webflow for different sections of my website?
  3. How do I apply custom CSS styles to specific elements in Webflow?