Rendering issue on Windows browsers

I received a note from a client that has been using a few weights from one of my families saying that the semibold (interpolated) weight is rendering very poorly on Windows browsers (e.g. at 22 px the counters in /a and /e completely close up). This is not an issue on my Mac browsers at even smaller sizes, and I tested it with Impallari’s test site at one point.

It seems as though they were trying to use the original .otf file for the web (if possible?) and said they replaced it with a web font format (don’t know which kind yet, I’m asking), but the issue still persists. The files were supplied through one of my vendors, so it’s hard to tell.

Whenever I export the fonts, I always use the autohint option (with alignment zones already set) and also the web font is usually set to OpenType/CFF with autohint.

I’m getting more info, but this is the first time I’ve had someone report this, so I’m wondering if anyone has any ideas?

Thanks!

P.S. Here’s some screenshots provided by client (top is Mac browser, bottom is Windows browser):

01%20PM

Perhaps testing on Windows should become part of your workflow, especially if you are delivering hinted fonts.

Yes, agree, however I had not run into this before nor had a report of it.

Finetuning your TTFAutohint settings may help.

Not having easy access currently to a Windows machine for testing rendering, are there any tools that I can use otherwise that might help indicate Windows environments?

I’ll have to research more about the TTFAutohint and it’s settings, as I have not used them outside of the standard autohint option at export.

Just install Windows on your Mac. With Fusion or Parallels, you can run Windows next to your Glyphs window. Export font files in a shared folder, and double click them in Windows.

Thanks for the feedback, Mekkablue. I’ll look into that. Right now I’m going to see what settings can be applied with the TTFA parameter and if it might help.

I’m going to start playing with the TTFA settings, but no real idea where to start… any suggestions based on what you’ve seen above? Would just hitting the “windows compatible” option perhaps be enough with the export autohint? (I’m going through the Webfont tutorial again.)

It’s the UX designer that reached out, so I can supply him with some test files, but don’t want to bog them down.

I’ll need to dig more into installing Windows and finetuning the settings, but trying to get this to the client as quick as possible since it’s already in use.

Find a description of the options in the Handbook Appendix (custom parameters) or the Freetype ttfautohint page. Cannot spare you from that I am afraid.

Most importantly, set your fallback stem properly. Then define Hint Set Range and and Hinting Limit, consider raising your x-Height Increase limit. NEVER EVER Adjust Subglyphs or Hint Composites.

Find good general settings, and if it still clogs up (you will need to test in Windows), you can add control instructions. For the proper point ID, refer to the preview in the TT Instructioning tool (I) or to the TT Viewer Tool.

Thanks again for this further info and links… I’ll look at these also more and hopefully can find some resolution pretty quickly. Will try to update later.

So I was able to borrow a Windows laptop and test the original font on the Cyreal.org testing page (Impallari doesn’t seem to be up anymore). This screenshot is from the Windows computer…

On the left is the original font (I think they said they were just using the .otf), and on the right is where the client is using it. You can see how it closes up in the /e and /a counters on the right in the word “features”, but the original font renders better. (The lighter weights seen here on the right are also from the family and seem to be ok.)

(I also tried exporting a TTF autohinted WOFF file and a version with the TTFA parameter settings applied, and both are not as bad what is shown on the clients site.)

I’m not sure how else to adjust it.

Annotation%202019-10-30%20150810

Which OS/browser combo are they using?

I can ask… for the testing shown above, I was using Windows 10 with both Chrome and IE. I can’t figure out why the test page renders different than the client website. It makes it hard to adjust and test.

… I’ve actually opened this discussion up on TypeDrawers as well because of the need for more potential insight into hinting and more experience. That is staying up to date currently with more info and tests: https://typedrawers.com/discussion/3383/rendering-issue-on-windows-browser-counters-closing

Thanks.

Also wanted to say thank you very much for all your help. I’m just trying to get it resolved asap and there are some layers we’re having to dig through.

For reference, here is an updated test where I’ve exported my own auto hinted font compared to the font files they are currently using on their site (which we’re thinking at this point was maybe provided and perhaps auto hinted by a reseller… not sure yet).

These screenshots are on a Windows 10 machine using Chrome.

Mine on left, theirs on right (click to view at actual size):

And mine on top, theirs on bottom (again, click for actual size), and it’s most evidenced at pixel sizes 22 and 14:


Is this the result of tweaking the ttfAutohint settings as I advised above? Can you post a screenshot of the settings?

Actually, I think that version was just using the autohint at export of a WOFF (starting to lose track of the tests a bit on my end).

But here are some screenshots of more Windows 10 / Chrome test comparisons and their settings (the 14px size is a good reference for these in comparing):

This is the client provided WOFF font that he said they’re using on their site:

client-provided-font-2

This is a TTF - WOFF that I just exported with autohint box checked - and no TTFA parameters were used:

ttf-autohint-woff-no-ttfa-settings

This is a OTF - WOFF that I just exported with autohint box checked - and no TTFA parameters were used:

otf-autohint-woff-no-ttfa-settings

In my opinion, the OTF WOFF (with standard autohint) displays best and is quite different from the poor rendering of the client file. Aside from the rendering quality, the other thing I’m noticing is that the vertical metrics might have changed some with the files they have because the line spacing is a little larger in my versions.

I’m still waiting to hear back from their devs regarding trying to test these files, but if I’m assuming the http://www.cyreal.org/Font-Testing-Page/index.php test is an accurate representation (as all this is from a Windows 10 machine), then these newly exported files should hopefully solve their problem if they replace the old ones with these on their site.(?) I guess it all depends on them testing when they can.