Can I add external fonts to the Webflow library?
TL;DR
- Upload custom font files via Project Settings > Fonts to use them in your Style panel.
- Use Google Fonts directly in the Style panel or connect Adobe Fonts with a Project ID in settings.
- Embed external fonts using @font-face CSS in Custom Code, though they won’t appear in the font dropdown.
You cannot directly add external fonts to the Webflow font library, but you can integrate custom fonts into your project using standard Webflow tools.
1. Use Custom Fonts via Project Settings
- Go to Project Settings > Fonts.
- Under the Custom Fonts section, you can upload your font files (WOFF, TTF, etc.).
- After uploading, the fonts will appear in your Style panel dropdown list.
2. Use Google Fonts or Adobe Fonts
- Webflow supports Google Fonts natively, just search and apply them through the Style panel.
- For Adobe Fonts (Typekit), go to Project Settings > Fonts, then:
- Enter your Adobe Fonts Project ID.
- The fonts in that Adobe project will become available in your Webflow styles.
3. Use @font-face with Embed Code (Advanced Option)
- If your font is hosted elsewhere (like on your own CDN), you can integrate it using @font-face CSS inside Page Settings > Custom Code.
- This method adds the font to your design, but the font won't show in the font dropdown or be part of the Webflow font library interface.
Summary
You can’t modify the Webflow font library itself, but you can upload custom fonts, use integrated services like Google Fonts and Adobe Fonts, or include external fonts with custom code.