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
- Upload individual
.ttffont files directly, not folders, via Site Settings > Fonts in Webflow. - If issues persist, convert files to
.woff, ensure files are under size limits, check permissions, and test with other fonts.
You're unable to upload .ttf font files from a Roboto folder into Webflow, even though the font files are visible on your desktop. This usually happens due to either the file format, upload method, or restrictions within Webflow's uploader.
1. Confirm You're Uploading Individual Files, Not Folders
- Webflow only allows uploading individual font files, not zipped folders or folders directly from your desktop.
- Even if you see the “Roboto” folder on your desktop with visible
.ttffiles, dragging the folder into Webflow won’t extract its contents. - Solution: Open the folder, select the
.ttffiles directly, and upload them individually via Site Settings > Fonts > Upload fonts.
2. Check If Font Format Is Supported
- Webflow accepts these font formats: .woff, .woff2, .ttf, .otf, and .eot.
.ttfis supported, but if the file is corrupted or incorrectly encoded, Webflow may silently reject it.- Solution: Try converting the
.ttffiles to.woffor.woff2using a service like Transfonter.org or Font Squirrel.
3. Ensure Font Files Don’t Exceed Size Limits
- Webflow may block font files that are excessively large.
- Typical
.ttffonts should be under a few hundred KB, but some Google Fonts include extended character sets, inflating size. - Solution: If you downloaded a full Roboto family, try uploading only the specific weights/styles you're using (e.g., Regular, Bold).
4. Verify File Permissions
- Occasionally, font files downloaded from the web may have restricted permissions (especially on Mac).
- Solution: Right-click a non-working file > Get Info > check Sharing & Permissions to ensure it’s readable, or duplicate and re-save the file.
5. Test with Other Fonts
- To isolate the issue, try uploading a different custom font file (in
.ttfformat) to Webflow. - If the alternate font works, then the issue lies specifically with your Roboto files or formatting.
Summary
Make sure you're uploading the .ttf files individually, not as a folder. If uploading still fails, convert them to .woff via Transfonter or Font Squirrel, and check the file size and permissions. Webflow won’t accept folders or improperly formatted fonts.