Has anyone experienced an issue with text appearing in italic on Safari (desktop version) when using Raleway from Google Fonts in non-italic weights from 100 - 900 in Webflow?

Issue with text appearing in italic on Safari (desktop version) when using Raleway from Google Fonts in non-italic weights from 100 - 900 in Webflow

If you are experiencing issues with the text appearing in italic on Safari (desktop version) when using Raleway from Google Fonts in non-italic weights from 100 - 900 in Webflow, there are a few possible explanations and solutions:

1. Font rendering: Safari applies font rendering differently compared to other browsers, which can sometimes result in the font appearing italicized, even if it's not intended to be. This can happen especially with thin weights like 100 or 200. Unfortunately, there is no direct solution to this rendering issue, as it is a browser-specific behavior.

2. Fallback font: Another possible cause of text appearing in italic on Safari is if the fallback font being used has a default italic styling. When a browser encounters a font that doesn't support a particular weight or style, it may automatically apply a fallback font that has a different default styling. To avoid this, ensure that the fallback font being used for Raleway doesn't have an italic style.

3. Font file format: The issue could also be related to the font file format being used. Different browsers may have varying support for different font file formats. It's a good practice to include multiple font file formats (WOFF, WOFF2, TTF, etc.) in your Webflow project to ensure cross-browser compatibility. You can upload these font formats to your Webflow project by going to "Project Settings" > "Fonts" > "Upload Fonts".

4. Invalid CSS: Double-check your CSS code to ensure there are no syntax errors or invalid declarations that could be affecting the font rendering. Make sure that the font weight and style declarations are accurate and properly applied.

To troubleshoot and resolve this issue, you can try the following steps:

• Clear the cache: Sometimes, browser caching can cause unexpected font display issues. Clear your browser cache and refresh the page to see if the issue persists.
• Validate your code: Validate your CSS code using a tool like the W3C CSS Validator to ensure there are no errors or typos.
• Test on different devices: Confirm if the issue is exclusive to Safari on desktop or if it occurs on other devices as well. Sometimes, it might be browser or device-specific.
• Contact Webflow support: If the issue still persists, you can reach out to Webflow's support team for further assistance. They can provide more specific guidance based on your project and help troubleshoot the issue.

Remember to regularly test your website on multiple browsers and devices to ensure cross-browser compatibility and consistent typography display.