What is the URL of the custom fonts from Webflow, such as 'HK Grotesk', that can be obtained for use in the CSS Editor of Acuity Scheduling?

To use custom fonts from Webflow in Acuity Scheduling, you'll need to manually upload the font files since direct URLs aren't typically exposed by Webflow for external use. Here’s how you can achieve this:

​

1. Download the Font from Webflow

• Go to your Webflow project.
• Select the "Fonts" tab in the "Project Settings".
• Find HK Grotesk and download the font files to your computer. These might include .woff, .woff2, .eot, and .ttf formats.

​

2. Upload the Font Files Elsewhere

• Host the font files on a server where you can access them via URL. Services like AWS S3 or Dropbox could be used.
• Ensure the font files are publicly accessible. This means anyone with the link can access the files, necessary for Acuity to access them.

​

3. Get the URL for Each Font File

• Obtain direct URLs for each font file once uploaded. Make sure these are correct and working.

​

4. Reference in Acuity Scheduling's CSS Editor

• Go to Acuity Scheduling's settings where you can edit custom CSS.
• Use the @font-face rule like so:

  ```

  @font-face {

    font-family: 'HK Grotesk';

    src: url('URLTOWOFF_FILE') format('woff'),

         url('URLTOWOFF2_FILE') format('woff2');

    font-weight: normal;

    font-style: normal;

  }

  ```

• Replace URLTOWOFF_FILE and URLTOWOFF2_FILE with the actual URLs for the font files.

​

Summary

To embed Webflow's HK Grotesk in Acuity Scheduling, download the font from Webflow, host the files publicly, create @font-face rules in Acuity's CSS, replacing placeholders with your URLs. This ensures the font loads correctly in your Acuity interface.