Font positiong issue WIN/MAC

Q&A about the latest versions
Post Reply
JSchrader
Posts: 112
Joined: Sat Nov 28, 2015 2:26 pm

Font positiong issue WIN/MAC

Post by JSchrader » Wed Dec 13, 2017 1:59 pm

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?
text.jpg
text.jpg (27.73 KiB) Viewed 266 times

JSchrader
Posts: 112
Joined: Sat Nov 28, 2015 2:26 pm

Re: Font positiong issue WIN/MAC

Post by JSchrader » Sat Dec 16, 2017 1:41 pm

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.

User avatar
Hopki
Gnome
Posts: 8060
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Font positiong issue WIN/MAC

Post by Hopki » Mon Dec 18, 2017 10:57 pm

Yeah, Safari has bugs no doubt about that.

JSchrader
Posts: 112
Joined: Sat Nov 28, 2015 2:26 pm

Re: Font positiong issue WIN/MAC

Post by JSchrader » Tue Dec 19, 2017 8:43 am

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.

User avatar
Tony
Posts: 366
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Font positiong issue WIN/MAC

Post by Tony » Wed Dec 20, 2017 2:36 pm

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | google+: http://google.com/+tonyredhead

JSchrader
Posts: 112
Joined: Sat Nov 28, 2015 2:26 pm

Re: Font positiong issue WIN/MAC

Post by JSchrader » Wed Dec 20, 2017 4:03 pm

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.

User avatar
Tony
Posts: 366
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Font positiong issue WIN/MAC

Post by Tony » Thu Dec 21, 2017 6:14 am

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | google+: http://google.com/+tonyredhead

JSchrader
Posts: 112
Joined: Sat Nov 28, 2015 2:26 pm

Re: Font positiong issue WIN/MAC

Post by JSchrader » Thu Dec 21, 2017 10:48 am

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

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

User avatar
Tony
Posts: 366
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Font positiong issue WIN/MAC

Post by Tony » Thu Dec 21, 2017 12:26 pm

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | google+: http://google.com/+tonyredhead

User avatar
Roy Reed
Posts: 154
Joined: Thu Apr 19, 2007 10:31 am
Location: London, UK
Contact:

Re: Font positiong issue WIN/MAC

Post by Roy Reed » Fri Dec 29, 2017 12:22 pm

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/

Post Reply

Who is online

Users browsing this forum: Bing [Bot] and 1 guest