Google Webfont Conflict with Local Font

Google Webfont conflict with local font

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 only works locally

import fonts from https://... url

google font reference

@import url('https://fonts.googleapis.com/css?family=Lato|Roboto');

p:first-child{font-family: 'Roboto';}

p:last-child{font-family: 'Lato';}

<p>https://fonts.google.com<p>

<p>https://fonts.google.com<p>

Google font locally with different weights but with the same name

Even though the font files are different, you don't need to set a different font-family for each variation of the font. You can just set one font-family, and specify the different variations in the different @font-face properties.

You should define each @font-face with the same font-family name, like so:

@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Italic.ttf");
    font-style: italic;
    font-weight: 400;
}
@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Bold.ttf");
    font-style: normal;
    font-weight: 600;
}

Note that each different font file has a separate @font-face with different properties that correspond to the specific font file, but they have the same font-family. You can then use the font in your css like so:

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.bold {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
.italic {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

The other properties in your css classes (font-weight, font-style, etc) will determine which @font-face is used.

Convert local font to Google Fonts CDN

You can link it in your HTML like so:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

or import it in your CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Roboto:wght@400;500;700&display=swap');

and then apply it to your css like so:

font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif;

Then you can delete your @font-face implementations.

source: https://fonts.google.com/share?selection.family=Roboto%20Slab%7CRoboto:wght@400;500;700

---

Related Topics