Community forum for knowledge and support

Updated 2 months ago

Inconsistent font display across different devices and operating systems

At a glance

The community member built a website using Relume and Webflow, but is experiencing an issue with the font display. On the community member's MacBook, the font looks fine on Chrome, but on their Windows machine, the font does not render well and is difficult to read. The community members tried adding CSS code to improve font quality and inserting a global styles component, but the issue persists. They also tried adding the font via the Adobe Fonts API, but the problem is still present only on Windows. Other community members suggest that this is a long-standing issue with font rendering differences between Mac and Windows, and recommend trying different fonts or further troubleshooting system preferences.

I built a website with relume and webflow but now i’m experiencing an issue with the display of the fonts - on my mac book, the font is displaying perfectly fine on chrome (as you can see on img1) but on my windows end, the font is not displaying the same and it seems like it’s the fonts are not rendering well or the font is not displaying as crisp or sharp and in fact are actually rather difficult to read on the windows end. (as seen on img2)

Does any one have a solution for this?

Attachments
img1.png
image.png
M
K
9 comments

would you mind sharing a read-only link?

yeah looks like the CSS that came with the style guide was deleted.

<!-- Keep this css code to improve the font quality-->
<style>
  * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
  -webkit-appearance:none;
}
</style>
You'll want to add that back in to the head code in the custom code section of the site settings.

Also noticed that the global styles component is not present on your pages besides on the style guide page.

Attachment
image.png

Thank's for yout tips! But I actually have inserted the css code in the custom code section of the site settings ... i also inserted the global styles component on the main page and the style guide page but it's still not working ...

okay - can you send the published URL (.webflow.io)?

how is the font added to the site? Did you select it from the drop down within the custom fonts section of site settings (google fonts) or did you upload the font files?

I added the font via the Adobe Fonts API / adobe web projects ... what's weird is, that on macos everthing looks perfectly fine but on windows it does not

well yeah, thats a decades old issue - literally - for as long as I've been building websites - Mac as always rendered fonts better than windows. Generally though if the right font file format is being used it shouldn't be too distracting.

I would do some googling as it appears you have all the right things in place but its likely a system preferences or its possible that the font you are using doesn't render clearly on windows but maybe others would.

Ok, i see. Thank you so much for your time and help!

Add a reply
Sign up and join the conversation on Slack