Garden Gnome Software

I'm using WOFF fonts from the server.
The text is from a textfield in a marker template with aligning left, autosize and a top/bottom left/right padding of 4.
On Chrome WIN (right) the text is centered, on Chrome Mac the text is towards the top and appears thicker.

What can I do?

It's a general problem with font metrics. When converting to web fonts use a converter that corrects that.
Even then there are different faces when viewed in safari and chrome on mac.

Yeah, Safari has bugs no doubt about that.

It’s not only safari. Was on Chrome as well.
And that’s nothing one can tell a customer when he loves Macs.
So there has to be the workaround.

Hi,

Have you tried using a CSS stylesheet to style the text. I've done a test output http://rebrand.ly/p2vr-font that uses a style sheet, an include page and an iFrame to load it into the text box for the node marker. As I don't have Win machine I tested it on the website CrossBrowserTesting using Windows 7 and Chrome 64 and comparing it to the view on my iMac using Chrome 63 and it looks exactly the same.

If you have a Mac and Win machine can you take a look at the test project and let me know if there is a difference. FYI the font I'm using is Futura-Medium.woff

I'm thinking if there is a difference you could possibly tweak the look in the CSS, have a logic block that shows two different CSS versions based on operating system.

cheers,

Tony

For people who are not web developers using CSS is kind of clumsy.
I would have to test on real computers if that would solve the issue, but don't have the time.
(In fact I doubt it will, as it would have to act only on macs).
It is much easier to just convert the font with a proper tool (works online) that corrects vertical alignment, which seems to be a known issue as I found many threads from people having the same problem and the solution through Google.

It is much easier to just convert the font with a proper tool (works online) that corrects vertical alignment, which seems to be a known issue as I found many threads from people having the same problem and the solution through Google.

So did the "proper tool" work and the position is now the same on the different operating systems? If so what is the tool called?

Tony

Oops, sorry, I was under the impression I already had mentioned these:

https://transfonter.org/
https://fontie.pixelsvsbytes.com/webfont-generator

Thanks for posting those I'll test them out.

In the meantime I've added them to my "Converting .TTF & .OTF fonts to .WOFF" tutorial at https://tonyredhead.com/pano2vr/converting-to-woff

Part of the problem is probably down to the differences in font rendering between the different platforms and wether the fonts have good sub-pixel hinting. You can read more here: https://www.smashingmagazine.com/2012/0 ... rendering/