How to keep google fonts in assets folder

Question

I have this link in my styles.scss

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

it is working fine in locally, but on production this API fails, or it is blocked, how can I host it in my project itself so that this API hit dependency get removed?

Is there any way to do the same for above URL?

Answer 1

open your link in web browser then you see this

then download each font then save to your folder assert.

example: https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2

then in tag or css file, edit src to the path you save the font

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(path/to/your/font/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Answer 2

See this page .

You can download font files and include them in your project.