How can I solve the issue of my custom fonts "jumping" back to the fallback font when launching my Webflow site in Google Chrome? I have already tried using .ttf, .eot, and .woff versions of the font, but it hasn't resolved the problem. Any suggestions?

TL;DR
  • Verify inclusion of necessary font formats like .woff, .woff2, and .ttf in Webflow.
  • Adjust font loading by adding a custom CSS with the font-display: swap property in the Head Code section.
  • Clear browser cache to load updated resources.
  • Confirm proper upload and linking of custom font files in Webflow's asset manager.
  • Ensure fallback font settings are correct.

When launching your Webflow site, your custom fonts "jump" back to the fallback font in Google Chrome. This might be caused by improper font loading or caching issues.

​

1. Check Font Formats

  • Verify that you're using all necessary formats including .woff2, which is preferred by most modern browsers due to better compression. 
  • Ensure that your Webflow site includes .woff, .woff2, and .ttf to cover various browsers.

​

2. Adjust Font Loading

  • Consider using "Swap" or "Optional" as the font-display property if not already done. Although Webflow does not natively allow setting CSS properties like font-display: swap, adding custom CSS in the Head Code section of your Webflow project settings can achieve this.
  • Go to Project Settings > Custom Code > Head Code and add the following: <style>@font-face { font-family: 'YourFont'; src: url('yourfont.woff2') format('woff2'), url('yourfont.woff') format('woff'); font-display: swap; }</style>. Replace 'YourFont' and yourfont.woff2 with your actual font name and file.

​

3. Clear Cache

  • Clear your browser cache and refresh the page to ensure you're testing with the latest resources loaded.

​

4. Inspect Webflow File Uploads

  • Verify that your custom font files are correctly uploaded to the Webflow site's asset manager. 
  • Check that there are no broken links to the font files in CSS.

​

5. Review Fallback Font

  • Ensure that your defined fallback font in the typography settings is intentional and correctly set.

​

Summary

By solving the custom font loading issue in Chrome, ensure you have all necessary file formats (especially .woff2), adjust font display settings using CSS for seamless loading, and clear your browser cache. Test thoroughly to ensure all changes take effect.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I generate a unique HTML ID for a heading inside a collection list item in Webflow without duplicating it when new collection list items are added?
How can Webflow hide a page section when a CMS list is empty?
Is there a way to target Safari mobile specifically in Webflow and work around the issue of the mobile browser toolbar regions hiding a portion of the flex 100VH region? Would this require custom code or is there a solution within Webflow?
Has anyone encountered a situation where they received the Webflow student discount but were unable to apply it because of an error message stating "Promotion code only available to students"? If so, how did you resolve this issue?
How can I make a Lottie animation fill the entire vertical container and align it to the right in Webflow?
How can I reduce the text size of a heading on scroll in interaction, similar to what Webflow does on its website?
What could be causing my lottie animation not to appear when I drag and drop the file into the Webflow canvas? I have installed the Bodymovin plugin and set up my After Effects preferences correctly, but still no luck. Additionally, I have set up the After Effects file with a RGB + Alpha for a transparent background. Could this be the issue?
How can I pass URL parameters to a button on my Webflow page that redirects to another site, while capturing the traffic source for non-Webflow form submissions?
How can I vertically center a container inside a section in Webflow? Thanks.
Can I create a form in Webflow that submits and creates new CMS items, without using any third-party integrations or tools?
How can I fix the issue with two scrollbars and scrolling on the page beneath instead of the overlay in Webflow, when using the "projects overlay" feature on my portfolio website? Also, how can I resolve the problem of the horizontal scroll getting stuck on the live page? Is there a solution to the lagging vertical scroll in the preview mode, possibly related to the issue with the horizontal scroll?
How can I fix the issue of my Webflow site not scrolling on mobile?
What is the process for collecting the IP address of form fillers in Webflow?
How can I remove the 'Tap to Unmute' button that appears on top of autoplay videos on mobile in Webflow?
How can I hide a form in Webflow on submit and display a confirmation div without interfering with the standard Webflow form JavaScript and without knowing JavaScript?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?