0

I tested my site speed on Gtmetrix and it showed fonts rendering through

https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Roboto:400,400i,700 . 

And it is called in theme layout as -css src="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Roboto:400,400i,700" src_type="url" . I want to download and store the fonts locally and render them . How to do this ?

2

2 Answers 2

0

First you need to difine css in default_head_blocks.xml like this

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <css src="css/custome.css" /> 
</head>
</page>

and then put your font css file in this path

app\design\frontend\Vendor\CustomTheme\web\fonts\custom.css
0
  1. Add font files to your local theme directory. For example,
app/design/frontend/<your_vendor_name>/<your_theme_name>/web/fonts.
  1. If you build a theme using the Magento UI library, declare the font by adding the .lib-font-face mixin to the

app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less

.lib-font-face(
         @family-name:'<any_font_name>',
         @font-path: '@{baseDir}fonts/<path_to_font_file>',
         @font-weight: <font_weight>,
         @font-style: <font_style>
     );

After This Step Follow This Command :-

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f
3
  • And how to call these fonts in default_head_blocks.xml?
    – chanchal
    Commented Mar 27, 2019 at 7:01
  • check updated answer Commented Mar 27, 2019 at 7:04
  • dont need to define less file Commented Mar 27, 2019 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.