1

I'm using metronic theme for building my web application. on each page this code is the first in the <head> tag:

<script>
     WebFont.load({
       google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
       active: function() {
           sessionStorage.fonts = true;
       }
     });
</script>

I need to get those fonts from google so that I can use them locally OFFLINE. How Can I get them? What code Should I write instead. Thanks.

usertest
  • 2,140
  • 4
  • 32
  • 51
  • Possible duplicate of [Downloading a google font and setting up an offline site that uses it](https://stackoverflow.com/questions/15930003/downloading-a-google-font-and-setting-up-an-offline-site-that-uses-it) – Harsh Patel Jan 03 '18 at 09:33
  • I will check that out. Thanks. – usertest Jan 03 '18 at 09:41

2 Answers2

1

fist of al download the font and go to font generator Like : https://transfonter.org/ than you can download this file and placing according to the file

lalit bhakuni
  • 607
  • 5
  • 15
0

I had also the same problem but I solved it by the following steps:

1) As you may know, you can import google fonts by using googleapi, so first of all I maked appropriate url such as:

'https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700'

and

'https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700'

These urls should return a css file that contains source of fonts.

2) Save these files to the appropriate path.

3) You need to download source url in 'src' of 'font-face', one by one, and then put it to the appropriate path. For example on the following snipped css:

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: local('Poppins Light'), local('Poppins-Light'), url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

You should download the font from the address:

'https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2'

4) Finally correct the 'url' of 'src' in the css file, according to the local font files.

Hope that it helps.

Varan Sinayee
  • 1,105
  • 2
  • 12
  • 26