Font-face shifting out of place in Google Chrome - css

Question

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:
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

Answer 1

I recently had the same problem, but my font was NOT locally installed. (By the way, that would be a problem in web design, as you cant control the installed fonts on pageviewer´s computer).
The problem only occurred in Chrome 26 on Windows, and later in Firefox 19 for Windows but not on any other browser (neither Windows nor Mac OS x).
I finally found out that Chrome/Win would only render SVG Font correctly and Firefox took WOFF unhinted.
So I dirty-fixed the uncorrectly-rendered down-shifting with this-like CSS-code
/* for all browsers */
#font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#wf') format('svg');
}
/* for all webkit-browsers (Chrome, Safari and newly Opera */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'myfont';
src: url('myfont.svg#wf') format('svg');
}
}
/* for all mozilla-browsers (Firefox) */
#-moz-document url-prefix() {
#font-face {
font-family: 'myfont';
src: url('myfont_unhinted.woff') format('woff');
}
}
Hope this helps anyone.

Answer 2

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?