Webflow sync, pageviews & more.
NEW

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?

TL;DR
  • Webflow doesn't support using its hosted fonts like 'HK Grotesk' on external platforms due to licensing and technical restrictions.
  • Instead, download the font from an official source and embed it via @font-face or a public CDN like Google Fonts in your external platform.

To use a Webflow-hosted font like 'HK Grotesk' in an external platform (e.g., Acuity Scheduling), you need the direct CSS URL that delivers the font from Webflow’s CDN. However, Webflow does not publicly expose font URLs for fonts added through their custom font uploader or Project Settings.

1. Understanding Webflow Font Hosting

  • Webflow only hosts custom fonts for use within its platform and within projects published via Webflow’s hosting.
  • These fonts are served via a project-specific CSS file, not a general-purpose external font URL like Google Fonts offers.
  • You cannot legally or technically hotlink Webflow fonts for use on non-Webflow-hosted platforms like Acuity.

2. How to Find the Webflow Font URL (If Possible)

If you want to try extracting the CSS URL:

  • Publish your Webflow project that includes HK Grotesk.
  • View the published site in Chrome and open DevTools (Right-click → Inspect).
  • Go to the Network tab, filter by CSS, and reload the page.
  • Look for a CSS file from Webflow’s CDN (e.g., https://cdn.prod.website-files.com/...)
  • Open that CSS file and locate the @font-face rule for 'HK Grotesk', which contains the URL of the font files.
Note: These URLs are CDN-resolved and tied to your project, so they may not work externally or may violate Webflow's terms of use.

Since Webflow fonts aren't designed to be used externally:

  • Download HK Grotesk directly from an official source like Google Fonts (if available) or from the foundry (e.g., Fontstand or [Hanken Design Co.]).
  • Host it yourself or use a reliable public CDN that allows font embedding.
  • In Acuity CSS editor, use standard @font-face or a Google Fonts import, such as:
  • @import url('https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap');

4. Legality and Fair Use

  • Webflow license agreements prohibit unauthorized use or distribution of font files hosted on their CDN.
  • To stay compliant, avoid hotlinking Webflow font resources on external platforms.

Summary

You cannot reliably or legally use Webflow-hosted fonts like 'HK Grotesk' in Acuity Scheduling via a direct URL. Instead, download the font from an official source and host it properly or link a licensed web version (e.g., via Google Fonts).

Rate this answer

Other Webflow Questions