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 or Kit code into Webflow via Project Settings > Custom Code > Head Code and publish your site.
- Use
<i>tags with Font Awesome classes inside Embed elements to display icons, as they don't appear in the native font selector.
You cannot install Font Awesome 5 fonts directly into Webflow’s font selection panel, but you can integrate Font Awesome 5 and use its icons via code. Here's how to do it properly:
1. Include Font Awesome 5 in Webflow
- Go to Project Settings > Custom Code.
- In the Head Code section, paste the Font Awesome 5 CDN link. If you have a Kit from Font Awesome, paste that instead. Example:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">- Save settings and publish your site to make it effective.
2. Use Icon Classes in Embed or Custom Code
- To display a Font Awesome icon, use an Embed element in the Webflow Designer.
- Insert icon markup manually, for example:
<i class="fas fa-camera"></i>for a camera icon from the solid style.
3. Understand Font Limitations
- Font Awesome is not a text font like those found in the Webflow font selector. You won't see Font Awesome icons in the font dropdown of text elements.
- To use Font Awesome "fonts" in text, you'd need to manually set the font-family via custom CSS, but that would still require corresponding icon class usage to render properly, which is not practical through the Webflow text editor.
4. Using Font Awesome Pro or Kit (Optional)
- If you're using Font Awesome Pro, use the Kit code provided by your FontAwesome.com account.
- Paste it in your project under Project Settings > Custom Code > Head Code as described in Step 1.
Summary
You cannot install Font Awesome 5 into Webflow’s native font selector, but you can integrate it via a CDN or Kit in Project Settings > Custom Code and use icons with <i> tags in Embed elements or custom HTML. Font Awesome icons do not show up in Webflow’s font dropdown or as text fonts.