TR Forums

Different OSes have different fonts installed. If a web site uses a font that isn't installed on the system the web browser is running on and doesn't specifically download it as part of the CSS, the browser will attempt to guess, choosing the locally installed font that it thinks is "closest" to the font requested. Sometimes there isn't a good match; other times, the browser simply guesses badly. The end result can range from a page that looks subtly different, to a page layout train wreck (if the site is relying on specific font metrics).

A similar thing can happen if the site does not use an explicit font, but makes incorrect assumptions about the properties of the font the web browser defaults to.

The New York Times web site rendered really badly on my Linux desktop for a couple of weeks recently (seems OK now). I've seen similar issues on other mainstream sites over the years. So this issue can affect even high-profile sites.

The site you linked looks OK to me (Chrome on Ubuntu Linux), but I don't know what it is supposed to look like so I have no basis for comparison.

Edit: There's a weird effect being applied to the fixed top navigation bar, where the horizontal/vertical spacing of some elements changes slightly depending on whether you've scrolled down the page or not. Not sure what the point of that is, as it adds no functionality to the page. Egregious "stupid CSS/JavaScript tricks" are a pet peeve.

I don't see any issues from here, between my Windows box and Mac Book Pro. That said I only checked the homepage. Perhaps an interior page is calling a different font or you had this fixed already.

The homepage is only using one custom font (Lato) and it "should" load dynamically from Google.

<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">

You may wish to try again, but do a Ctrl+F5 to do a fresh non-cached load.

I checked the site from 2 devices and the font was slightly different but not as crazy as I thought it would. However, I've seen this before and I personally like the version on my Mac better!

Windows and Mac OS also use different font smoothing algorithms which can affect smaller text, particularly fonts that rely on blurred edges to look correct.

hanklai wrote:

Does fonts look different on Mac and Windows?

I was testing one of our client's website on a MacBook and a Lenovo Windows Laptop. I noticed that the fonts on this website https://www.plumbwize.ca/ look very different. Is there a fix to this?

This is the first time I'm encountering anything like this.

The fonts on this particular website is being delivered by Google's web fonts cache.

https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i

And like JBI said, different anti-aliasing methods on different devices. And that's especially true if you're comparing a standard 100% scaling on Windows to a retina display on a Mac.

edit: I missed that prb123 said this a long time ago. I missed that this thread is months old and was necro'd. Oops.