Font positiong issue WIN/MAC

Q&A about the latest versions
Post Reply
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 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 3996 times
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 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: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Yeah, Safari has bugs no doubt about that.
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

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: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 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: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

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: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Roy Reed
Posts: 168
Joined: Thu Apr 19, 2007 10:31 am
Location: London, UK
Contact:

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