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?

Solution

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!

Comments

[John Doe Smith]

This is a good one. I also thought of this, but the problem is that your code only loads the .woff-file. The other thing is that, when i use the "&text=" parameter on the query-string i'm loading the whole font and not only the characters i need. So I need a trick or a hack that it is not taking the local-font.

[Chris]

@JohnDoeSmith You mean you want to be able to use the &text= parameter but still ignore local fonts?

[John Doe Smith]

yes. that's it. but i figuered out a solution that will work for me. All in all your answer is right. so you'll get the √ … thx ;)

[Jasper]

This looks like a good answer, but it's not because it has some rather drastic side-effects. The CSS google generates depends on which browser is used (or more accurately, the user agent string sent) so this way you will mysteriously lose support for browsers...

[darcher]

@JohnDoeSmith I just found this out today so I'll share the insight. Jasper touched base on it a little, but "It will actually load the smallest format your browser can handle. WOFF offers small file sizes, and your browser supports it, so it's the one you see. WOFF is also fairly widely supported. However, in Opera for example, you'll probably get the TrueType version of the font." -ZachRabbit

[Judah Gabriel Himango]

As of 2014, it appears every modern browser supports WOFF. caniuse.com/#search=woff Old IE (IE8-) and Opera Mini are the only ones that don't support it. Unless you need to support IE8- or Opera Mini, this solution is entirely acceptable.