Why are my .ttf files not appearing when trying to upload a folder of Google's Roboto fonts to Webflow's custom fonts in site settings, even though the folder shows that it contains the files on my desktop? Any advice on what to do?
TL;DR
- Only upload individual .ttf (or compatible) font files directly into Webflow’s Custom Fonts section—do not upload folders.
- Ensure the fonts are static (not variable) and use Webflow’s Google Fonts integration if possible for easier setup.
.TTF font files not appearing in Webflow's custom font uploader usually means the upload process is being done incorrectly or the files aren’t being uploaded in the supported way.
1. Webflow Doesn’t Support Uploading Folders
- Webflow only accepts individual font files for upload—you can’t upload a folder.
- If you attempt to drag and drop a folder (even if it contains .ttf files), Webflow will ignore it and display nothing.
2. Extract and Upload Individual Font Files
- Use Finder (Mac) or File Explorer (Windows) to open the folder on your desktop.
- Select just the .ttf files (or whichever format you're uploading—.woff, .woff2, etc.).
- Drag and drop the individual files directly into Webflow’s Custom Fonts area under Project Settings > Fonts.
3. Check for File Compatibility
- Webflow supports .woff, .woff2, .ttf, and .eot formats.
- Google Fonts often provides variable fonts too, which may not always be compatible—check that you're uploading regular static font files, not variable ones like Roboto[wdth,wght].ttf.
4. Optional: Use Google Fonts Integration Instead
- Instead of uploading custom files, you can also use Webflow’s built-in Google Fonts integration by going to Project Settings > Fonts and selecting Google Fonts > Add fonts.
- This method is more streamlined and avoids the need to manage font files.
Summary
You must upload individual .ttf files, not a folder. Open your font folder, select the font files manually, then drag and drop them into Webflow’s custom font uploader. Make sure you're using compatible static font files.