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:

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!