Webfont / margins displayed differently on Firefox

Hello everybody,
I have a really weird problem concerning the webfont I use on my webflow project. Everything looks great on Chrome and Safari, but when I look at it on Firefox, the margins change (I might not use the right terms as I am no programmer but a graphic designer). Here’s an example:

Chrome / Safari:

Firefox:

Please notice the difference when I mark the text with the cursor: Chrome and Safari have it nicely centered, Firefox not. And this is exactly what causes the margins to change (in this example between the small text «Wir helfen» and «Ihnen»). If I do it all for example with «Georgia», the problem is gone thus it looks identical on all three browsers.

I’ve uploaded the webfont in «woff», «svg», «eot» and «ttf», so that is not an issue. I’ve already lost hours on finding a solution. The projects is heavely based on centering text vertically and that is why this behaviour is so frustrating for me. You can have a look at it here: project (not public but enought to check it out with an element inspector)
Any help or ideas hugely appreciated.
Thank you in advance,
Reto