Search code examples
cssfirefoxgoogle-chromefont-facewebfonts

Font-face shifting out of place in Google Chrome

I know there are browser rendering inconsistencies between Chrome and Firefox (Windows, both). But I am seeing a weird bug involving @font-face & gooogle-fonts shifting the font down about 10px in Chrome.

Here is an image to illustrate the problem. I have highlighted the text so that you can see the shift:

Screenshots from Chrome and Firefox

Here is the CSS for clarity:

.primary-menu li a,
.primary-menu li a:visited {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    padding-right: 0;
    transition: padding-right .5s;
}

I am using Google Fonts for the Oswald type face:

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700' type='text/css'>

I am using a CSS reset, so most properties are set to a default value. I have tried fiddling with the CSS to see if I can analyse why it is shifting, but I can not see an effect other than turning off the font-face.

Here is the source site for reference. Concept Design Ltd

Any knowledge on why this is happening would be fantastic.

Many thanks, Neil

Solution

  • I was having the same issue, but in FireFox - I removed the Oswald fonts I had in my font directory on my computer and it fixed the issue. Maybe give that a go?