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
- Webflow doesn't accept folder uploads—manually select and upload individual .ttf, .otf, .woff, or .woff2 files instead.
- Alternatively, enable fonts like Roboto directly via Google Fonts in Webflow’s Project Settings to skip manual uploads.
You're trying to upload .ttf font files from a folder (e.g., Roboto) into Webflow’s Custom Fonts section, but the files aren’t showing in the upload dialog. This usually happens because Webflow only accepts specific font upload methods.
1. Webflow Doesn’t Support Folder Uploads
- Webflow does not allow uploading entire folders.
- When you try to upload a folder (even though it shows files inside on your desktop), Webflow won’t recognize or display the individual font files inside.
2. Use Supported Font Formats and Individual File Uploads
- Webflow supports .ttf, .otf, .woff, and .woff2 formats.
- You need to upload each font file individually or select multiple files at once (but not a folder).
- On Mac, use Cmd + Click to select multiple files; on Windows, use Ctrl + Click.
3. Check If the Files Are Truly Fonts
- Double-check that the files in your folder are actual .ttf font files, not aliases or broken links.
- On Mac: Right-click a file, then Get Info, and verify it's a TrueType Font with a non-zero file size.
- On Windows: Right-click, go to Properties, and make sure the file type is TrueType font file (.ttf).
4. Upload Fonts to Webflow Properly
- Go to Site Settings > Fonts in Webflow.
- Click Upload, then in your file picker, navigate to your folder, and manually select the .ttf files (do not select the whole folder).
- Once uploaded, Webflow will generate variants (e.g., bold, italic) for use in the Designer.
5. Alternatively, Use Google Fonts (if Web-Based)
- Webflow already includes Google Fonts like Roboto.
- Instead of uploading manually, go to Project Settings > Fonts, search for Roboto under Google Fonts, and enable it.
- This avoids the upload process entirely and ensures up-to-date fonts.
Summary
You can't upload entire folders to Webflow—only individual .ttf files using the file picker. Either manually select the font files from your folder or use Google Fonts integration in Webflow if the typeface is available there (like Roboto).