Magento 2 Using Google Fonts

Introduction

Integrating Google Fonts into your Magento theme can enhance the typography and overall design of your website. This guide will walk you through the steps to add Google Fonts to your Magento theme.

Step 1: Update `default_head_blocks.xml`

Navigate to your theme folder and open Magento_Theme > layout > default_head_blocks.xml. Modify the file to include your Google Fonts link as shown below:

<?xml version=”1.0″?>
<!–
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
–>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>
    <head>
        <link src=”http://fonts.googleapis.com/css?family=Montserrat” src_type=”url” rel=”stylesheet” type=”text/css” />
    </head>
</page>

Step 2: Update `_typography.less`

Next, go to web > source > _typography.less in your theme folder. Update the file with the following code to apply the Google Font:

@import url(‘http://fonts.googleapis.com/css?family=Montserrat’);
@font-family-name__base:’Montserrat’;
@font-family__base: @font-family-name__base, @font-family__sans-serif;

Conclusion

After updating these files, your Magento site should now display the Google Font across the website, enhancing its visual appeal.

Further Assistance

If you encounter any issues or have questions, feel free to leave a comment below or reach out for further support.

Leave a Reply Cancel reply