How To Remove CSS/JS/Font Using Layout XML In Magento 2
March 14, 2024 -
Magento 2 Frontend
Today i have shared how to remove css/js/font using layout xml in in magento 2. To remove CSS, JS, or font files using layout XML in Magento 2, you can use the <remove> tag within your custom module or theme’s layout XML file. Here’s how you can do it:
Remove any CSS/JS/Font follow this xml strutucher :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
// your add/remove code here
</head>
</page>
Identify the CSS/JS/Font file you want to remove:
app/design/frondend/vendor/your-theme/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<remove src="css/print.css"/>
</head>
</page>
Identify the JS file you want to remove:
<remove src="js/custom.js"/>
<remove src="Vendor_Module::js/name.js"/>Identify the Font file you want to remove:
<remove src="http://fonts.googleapis.com/css?family=Montserrat" />
<remove src="fonts/opensans/light/opensans-300.woff2"/>
<remove src="fonts/opensans/regular/opensans-400.woff2"/>
<remove src="fonts/opensans/semibold/opensans-600.woff2"/>
<remove src="fonts/opensans/bold/opensans-700.woff2"/>
Clear the cache: After making changes to your layout XML file, be sure to clear the Magento cache to ensure that the changes take effect. You can do this by running the following command in the Magento root directory:
php bin/magento cache:cleanDetermine the file path of the CSS, JS, or font file you wish to remove from the frontend of your Magento 2 store.
