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
Hyvä Theme is Now Open Source: What This Means for Magento Community - Mageplaza
Hyvä is now Open Source and free. Discover what changed, what remains commercial, how it impacts the Magento ecosystem, and how to maximize its full potential.
Holiday Marketing Hacks 2025 - How to Boost Sales for Magento 2 Stores? - Mageplaza
Discover the best 2025 holiday marketing strategies for Magento 2. Learn key trends, creative campaign ideas, and expert tips to increase seasonal sales.
Hyvä Theme is Now Open Source: What This Means for Magento Community - Mageplaza
Hyvä is now Open Source and free. Discover what changed, what remains commercial, how it impacts the Magento ecosystem, and how to maximize its full potential.
Holiday Marketing Hacks 2025 - How to Boost Sales for Magento 2 Stores? - Mageplaza
Discover the best 2025 holiday marketing strategies for Magento 2. Learn key trends, creative campaign ideas, and expert tips to increase seasonal sales.