1

I've looked all over and can't seem to find a solution for this. I am making a website for the company I work for and we came across a font rendering issue. I have the font set as "Avenir Next" with a font weight of 200. On my computer (Mac) it looks great on all browsers. On my co-worker's computer (Windows) it is hardly legible. Apparently it has something to do with the way Windows font rendering works.

My question is: How do I use Avenir Next (font weight: 200) for Mac users, and a comparable font for windows users? I realize I could always import a google web font to make them the same, but we do like the way it looks on the Mac... and plus it's always fun to learn new tricks!

Thank you.

Chase Martin
  • 49
  • 7
  • When setting a font on a web page, if the font is installed it will be used, if not, a replacement will. In your case, do `font-family: 'mac font','windows font','replacement font',sans-serif` and the first one available will be used, and the last generic in case no one exists. – Asons Mar 14 '19 at 14:10
  • @LGSon I understand that. He has the same font on his computer, but it doesn't look right; which is why I'm trying to specify based on OS – Chase Martin Mar 14 '19 at 14:15
  • Then you need https://stackoverflow.com/questions/10527983/best-way-to-detect-mac-os-x-or-windows-computers-with-javascript-or-jquery to detect and set a class on e.g. the html tag when page loads, e.g. `html.macos body { ... }` or `html.winos body { ... }` – Asons Mar 14 '19 at 14:23
  • Btw, what if you swap the order so the Windows font is first in the list? ... assuming the Mac doesn't have that too. – Asons Mar 14 '19 at 14:23

0 Answers0