Can Fontawesome 5 fonts be installed in Webflow and accessed using the font selection and appropriate code?
TL;DR
- Add the Font Awesome 5 CDN link in Webflow’s Project Settings > Custom Code > Head section, then publish the site.
- Use icons by embedding HTML (
<i class="fas fa-icon-name"></i>) or assigning Font Awesome classes to elements; do not use the font picker as icons aren't available there.
Font Awesome 5 can be used in Webflow, but it cannot be added via the font selection menu. Instead, it must be added as an external library and accessed via HTML embed or class naming conventions.
1. Add Font Awesome 5 to Your Project
- Go to Font Awesome CDN (https://fontawesome.com/start) and choose the "Free CDN" option for version 5.
- Copy the kit/link tag. For example:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
- In Webflow, go to Project Settings > Custom Code > Head section and paste the link there.
- Save changes and publish your site for the code to take effect.
2. Use Font Awesome Icons via Embed or Class Names
- Add an Embed element for icon usage, and paste standard FA5 syntax like:
<i class="fas fa-camera"></i>
- Alternatively, add a regular Webflow element (like a div or span) and give it the appropriate Font Awesome class (e.g.,
fas fa-camera). - Do not try to access Font Awesome from the Webflow font dropdown menu, as icons are not treated as text fonts in Webflow’s UI.
3. Font Awesome Fonts and Font Picker in Webflow
- Webflow's font picker is for typography fonts, not icon font kits like Font Awesome.
- Even though Font Awesome technically uses fonts, you cannot install them as selectable fonts inside the Typography settings in Webflow.
Summary
You can use Font Awesome 5 in Webflow by linking the CDN and referencing icon classes manually. However, Font Awesome icons will not appear in Webflow’s font selection menu, and must be added via class names or embed code.