Search code examples
cssgoogle-chromefirefoxfont-face

Firefox font vertical misalignment?

So I use this webfont called Gagalin (Regular) on a design of mine and it works fine in Chrome and Edge. However, when I look at it in FireFox I get a very strange vertical misalignment (image below). Also the @font-face rule I use has always worked before (also in FireFox) just not with this font because the other webfont I'm using is aligned correctly. Any ideas on how I could fix this? I am assuming it has something to do with the font or?

EDIT maybe this is not the best place to ask but I don't really know where else to

CODE

I have magin, padding and line-height reset set + I have normalize.min.css included with h1 margin reset by me explicitly to 0 to override the normalize margin. Also the line-height for the header h1 is set at 1 again.

Dropbox link to the font files

@font-face {
    font-family:'Gagalin';
    src:url(../fonts/gagalin/Gagalin-Regular.eot);
    src:url(../fonts/gagalin/Gagalin-Regular.eot?#iefix) format('embedded-opentype'),
        url(../fonts/gagalin/Gagalin-Regular.svg#Gagalin-Regular) format('svg'),
        url(../fonts/gagalin/Gagalin-Regular.woff2) format('woff2'),
        url(../fonts/gagalin/Gagalin-Regular.woff) format('woff'),
        url(../fonts/gagalin/Gagalin-Regular.otf) format('opentype');
    font-weight:400;
    font-style:normal
}

* {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;

    font-weight: normal;
    font-size: 3vm;
    font-size: 3vmin;
    line-height: 1.5;
}

h1 {
    font-family: 'Gagalin';
    margin: 0;
}

header h1 {
    line-height: 1;
}

UPDATE Tried removing all fonts but the woff ones and the issue remains the same 

@font-face {
    font-family:'Gagalin';
    src:url(../fonts/gagalin/Gagalin-Regular.woff2) format('woff2'),
        url(../fonts/gagalin/Gagalin-Regular.woff) format('woff');
    font-weight:400;
    font-style:normal
}

IMAGES

Screenshot

Edge

Solution

  • Right for those who want to know I was able to fix this by opening the font in Birdfont , exporting it and reconverting it. I don't really know why Firefox was messing it up whereas the other browsers didn't have a grudge with it but it is working now.

    Thanks for your time and answers