Vinh Jacker | 03-17-2025
In today’s article, I will guide you on how to add and remove static files including JS, CSS and Fonts in Magento 2.
With this easy-to-understand tutorial, it will be easy to add or remove Static Files JS, CSS, Fonts.
Let’s start now!
Commonly, if you want to use external libraries to customzie pages in Magento 2, you need to add JavaScript and CSS files. JavaScript, CSS, and other static files will be added to the <head> section of the page configuration file.
In a page configuration file, the <head> section includes various static resources such as JavaScript, CSS. The file app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml defines the original look of the <head> section in a Magento store page.
To add CSS and JavaScript, you are recommended to extend the file in your custom theme, and then add the files there.
Below is a sample of a file that have to be added:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Add local resources -->
<css src="css/my-styles.css"/>
<!-- The following two ways to add local JavaScript files are equal -->
<script src="Magento_Catalog::js/sample1.js"/>
<link src="js/sample.js"/>
<!-- Add external resources -->
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
<link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
</head>
</page>
When external resources are added, you have to specify the src_type="url" argument value.
Either the <link src="js/sample.js"/> or <script src="js/sample.js"/> instruction can be used to add a locally stored JavaScript file to your theme.
One of the following locations relatively specifies the path to assets:
<theme_dir>/web-<theme_dir>/<Namespace>_<Module>/web-Conditional comments are used to provide special instructions for Internet Explorer. In the terms of adding files, CSS files can be added for you to be included for an Internet Explorer’s specific version.
Here is an example:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/ie-9.css" ie_condition="IE 9" />
</head>
</page>
Here, an IE conditional comment is added in the generated HTML, please view the below example:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="<your_store_web_address>/pub/static/frontend/OrangeCo/orange/en_US/css/ie-9.css" />
<![endif]-->
In the above example, orange is the custom theme that is created by the OrangeCo vendor.
For the static assets which is linked in a page <head> to be removed, you can make a change in a theme extending app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml like the following:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove local resources -->
<remove src="css/styles-m.css" />
<remove src="my-js.js"/>
<remove src="Magento_Catalog::js/compare.js" />
<!-- Remove external resources -->
<remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
<remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
<remove src="http://fonts.googleapis.com/css?family=Montserrat" />
</head>
</page>
You need to remember that the module path need to be specify if you add or remove a static asset with a module path in the initial layout, for example Magento_Catalog::js/sample.js.
Above are the simple solution to help you add and remove static files in Magento 2. I hope it is helpful for you. If you have any questions or new ideas, feel free to leave a comment below.
Jacker is the Chief Technology Officer (CTO) at Mageplaza, bringing over 10 years of experience in Magento, Shopify, and other eCommerce platforms. With deep technical expertise, he has led numerous successful projects, optimizing and scaling online stores for global brands. Beyond his work in eCommerce development, he is passionate about running and swimming.
Related Post
5 Ways to Hide Products on Shopify (2026 Guide)
Explore the best 5 ways to hide products on Shopify. Learn how to manage visibility, protect pricing, and create a tailored shopping experience for buyers.
Magento 2 Abandoned Cart Tracking: How to Measure Recovery Performance
Learn how to track and measure abandoned cart recovery performance in Magento 2 such as KPIs, native reporting gaps, and how to use Mageplaza's built-in ACE reports to find what's working and optimize your emails.
What is a Hyvä Developer? What They Do, Cost & How to Choose (2026) - Mageplaza
Learn what a Hyvä developer does, how much it costs, and how to choose the right one. A complete guide for Magento merchants planning a Hyvä project.
How to Build Customer Loyalty in E-commerce: 7 Proven Strategies
Discover how to build a customer loyalty system that drives repeat purchases and long-term growth, with actionable tactics for every store size.
GTM Debugging on Magento: A Complete Troubleshooting Guide
GTM not working on your Magento store? This guide shows you exactly where tracking breaks and how to fix it, from product pages to order confirmation.
5 Ways to Hide Products on Shopify (2026 Guide)
Explore the best 5 ways to hide products on Shopify. Learn how to manage visibility, protect pricing, and create a tailored shopping experience for buyers.
Magento 2 Abandoned Cart Tracking: How to Measure Recovery Performance
Learn how to track and measure abandoned cart recovery performance in Magento 2 such as KPIs, native reporting gaps, and how to use Mageplaza's built-in ACE reports to find what's working and optimize your emails.
What is a Hyvä Developer? What They Do, Cost & How to Choose (2026) - Mageplaza
Learn what a Hyvä developer does, how much it costs, and how to choose the right one. A complete guide for Magento merchants planning a Hyvä project.
How to Build Customer Loyalty in E-commerce: 7 Proven Strategies
Discover how to build a customer loyalty system that drives repeat purchases and long-term growth, with actionable tactics for every store size.
GTM Debugging on Magento: A Complete Troubleshooting Guide
GTM not working on your Magento store? This guide shows you exactly where tracking breaks and how to fix it, from product pages to order confirmation.