Can Fontawesome 5 fonts be installed in Webflow and accessed using the font selection and appropriate code?
- Add the Font Awesome 5 CDN link in Webflow under Project Settings → Custom Code → Head Code.
- Use tags inside Embed elements to display and style icons manually.
Webflow does not support installing and selecting Font Awesome 5 fonts through its native font selector, but you can still use Font Awesome icons by embedding the required code manually.
1. Understand What’s Possible
- Webflow’s font selector only supports text fonts, not icon fonts like Font Awesome.
- Font Awesome icons require custom embed code—they are not available as selectable font styles in typography settings.
- You can’t upload Font Awesome to appear in the Fonts dropdown like Google Fonts or custom font uploads.
2. Add Font Awesome 5 to Your Webflow Project
Go to Project Settings > Custom Code.
In the Head Code area, add the following:
For Free version:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">For Pro version: use your Kit URL or Pro-specific CDN link.
Save changes and publish the site for changes to take effect.
3. Embed Icons in HTML Elements
Use Embed elements or custom embeds in a Rich Text or Div block.
Example:
<i class="fas fa-check-circle"></i>
This loads a solid check-circle icon using Font Awesome 5.If using inline text, make sure the element is set to display inline and styled appropriately.
4. Style Icons with CSS
- Use Webflow’s Embed element or custom CSS to style Font Awesome icons.
- You can apply classes via Webflow Designer or in the embed code directly.
Summary
Font Awesome 5 cannot be installed and accessed via Webflow’s font selector, but you can fully use it using custom embed code. Add the Font Awesome CDN in your Project Settings > Head Code, and use <i class="..."> elements in Embed blocks wherever you want to display icons.