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.