Geek Answers Handbook

Google Webfont conflicts with local font

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

This is in the 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 three fonts:

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

As you can see. I downloaded only bold (700). (you can see it in the request) And it still works BUT ...

PROBLEM:

I have a desktop version of three fonts (300,400,700) installed on my computer, and while these fonts are activated ... the browser shows me the wrong font (400) in my html document.

OK The problem is that in my css, 'Oswald' takes localfont and not webfont. But the local Oswald font is Oswald Normal. I don’t know why google calls it Oswald instead of Oswald Bold. Therefore, I do not know how to solve this problem.

I do not want css to point to a local font. I want it to always show webfont ... because of the correct font weight!

Do you have any ideas? You are welcome?

Can I rename a webfont call?

+8
css fonts font-face webfonts google-webfonts
source share
1 answer

You can edit the CSS @font-face rule to suit your needs, rather than just loading automatically generated from Google. Basically the problem is that their rule prefers local versions ( src: local('Oswald Bold'), local('Oswald-Bold'), ... ). The adjusted check will look like this:

 @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 this to your CSS manually and use font-family: 'WebOswald'; when you want to use the Google Web font version.

I hope this helps!

+11
source share

More articles:


All Articles