Search code examples
csshtmlgoogle-chromefontsfont-face

@fontface chrome rendering to high

I have some problem with @fontface in Google Chrome. The font is rendered too high.

When I change the font to Arial, the button is allright in all browsers. When I change it to the @fontface font the text jumps up.

Below are 2 images that show the difference between Firefox and Chrome.

Chrome

Firefox

What can I do?

I've tried: -webkit-font-smoothing: antialiased;

Also I added the following for all the fonts right after the font declaration:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Museo-Sans-Rounded-100-Regular';
        src: url('../fonts/Museo-Sans-Rounded-100-Regular.svg') format('svg');
    }
}

Both didn't help.

What can I do? All the help is very welcome!

Solution

  • Thanks to Vira for pointing to the right post. The solution can be found here:

    @font-face svg not working properly in Chrome?