How to use google fonts locally instead of importing in angular 4 project

Question

I am importing google fonts urls in my angular 4 project scss file like below,

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Heebo:400,500,700');

instead of importing url's directly, how can I download/install them and use locally in angular 4 scss file.

Any solutions will be helpful.

Answer 1

2 step solution

Step - 1 : Download the fonts and save them inside assets folder

Save the ttf/otf file inside the assets folder of your project

Step - 2 : In your css file, just import them with proper relative path

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

Answer 2

Download Google’s style sheet hosted on googleapis.com domain:

https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap

Save the file right into your theme directory so it’s now:

https://www.example.com/themes/fonts.css

When you open this fonts.css file, there is content which looks like this:

/* latin-ext */
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
...

Save font from url in newly created folder fonts in your theme and replace path in fonts.css so it’s:

src: url(https://www.example.com/themes/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');

NOTE: In my case, there were 60+ fonts to download :-)

Last step is to add fonts.css to your HTML:

<link rel="stylesheet" id="local-fonts-css" href="https://www.example.com/themes/fonts.css?ver=1.0" type="text/css" media="all">

That's the basic. More details in this blog post.