How to get these google fonts for offline use

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.

标签： html css fonts google-fonts

2条回答

孤傲高冷的网名

2楼-- · 2019-07-26 22:33

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

0人赞添加讨论(0) 举报

混吃等死

3楼-- · 2019-07-26 22:37

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.

0人赞添加讨论(0) 举报

How to get these google fonts for offline use

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间