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…

Accepted Answer

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!

Google Webfont conflict with local font

Solution

Problem