css - Google Webfont conflict with local font

Question

I have a really bad conflict with using google-webfonts. OK here is the code:

This is in head:

<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>

And this is in the css-file:

body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }

"Oswald" is a font-family of 3 fonts:

• book (300)
• normal (400)
• bold (700)

As you can see.. i've loaded only the bold-face (700). (you can see it in the query) And it works till here BUT …

THE PROBLEM IS:

I have a desktop-version of the 3 fonts (300,400,700) installed on my computer and as long as these fonts are activated … the browser shows me the wrong font-weight (400) in my html-document.

OK. The problem is that in my css 'Oswald' takes the localfont and not the webfont. But the local font "Oswald" is "Oswald normal". I don't know why google is calling it 'Oswald' instead of 'Oswald Bold'. So I don't know how to fix this problem.

I don't want the css to point at the local-font .. i want it to show always the webfont … because of the right font-weight!

Do you have any ideas? Please?

Possible to Rename the webfont-call?

Answer 1

You can edit the CSS @font-face rule to fit your needs instead of just loading the automatically-generated one from Google. Basically the issue is that their rule prefers local versions (src: local('Oswald Bold'), local('Oswald-Bold'), ...). The corrected verison would look like:

@font-face {
  font-family: 'WebOswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Just add that to your CSS manually, and use font-family: 'WebOswald'; when you want to use Google's Web version of the font.

I hope that helped!