What could be causing the issue with my Webflow site's font displaying correctly in Safari on mobile and desktop?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

There could be several factors contributing to the issue of fonts not displaying correctly in Safari on both mobile and desktop devices. Here are some possible reasons and their corresponding solutions:

Incorrect font file format: Safari has specific requirements for font file formats. Make sure you are using the correct font file formats such as WOFF, WOFF2, TTF, or OTF. If you are using a different format, convert it to one of the supported formats using a font converter tool.
Missing font files: Ensure that you have uploaded all the necessary font files to your Webflow project. This includes regular, bold, italic, and any other variations of the font that you are using. If any files are missing, upload them to the project's Font Manager.
File path issues: Double-check that the file paths for the font files in your CSS are correct. If the file paths are incorrect, Safari may not be able to locate and display the fonts. Ensure that the file paths are relative and match the locations of the font files in your project.
Font loading issues: Fonts can sometimes fail to load properly due to network connectivity issues or external factors. To mitigate this, you can use web font loading techniques such as asynchronous loading or utilizing the web font loader library. These methods ensure that the fonts will be loaded and displayed correctly even if there are delays or hiccups in the loading process.
Specific font rendering issues with Safari: Safari may have specific rendering issues with certain fonts. If you suspect this to be the case, try using a different font or font family to see if the issue persists. Alternatively, you can try adjusting the font size or font-weight to see if that resolves the problem.

Remember to thoroughly test your website on different versions of Safari and across various devices to ensure consistent font display.

Additional Questions:

How can I convert font files to the correct format for Safari?
How do I upload font files to Webflow's Font Manager?
What are some alternative web font loading techniques for Safari?

Will the custom code in my Webflow project continue to work even if my plan has expired but the code is still inside?

Is there a built-in feature in Webflow for this task or do we need to find an alternative method?

What is the purpose of Webflow?

What is the issue with overflowing content on iPhones in the case study page with a slider in Webflow?

Has anyone experienced an issue with scrolling to the end of a specific page in Webflow on mobile devices?

What is shown in the screenshot?

Why is the support form on the Contact page of The Hook Nook website accepting incorrect email formatting, and can someone from Webflow help fix or provide an ETA for a fix?

Has anyone found a solution in Webflow for reducing cumulative layout shift with dynamically sized hero images?

What are some key features of Webflow?

Has anyone else experienced Webflow serving low resolution images after compressing them using tools like tinypng? Is there any update on whether Webflow plans to fix this bug?