To increase the font size in the Magento Luma theme using LESS, you’ll need to override the default styles by creating a custom theme and modifying the relevant .less files. Here’s a step-by-step guide on how to do this:
-
Create a Custom Theme:
You should never modify the core Luma theme directly. Instead, create a custom theme based on Luma. This will ensure your changes are safe from updates and won’t break your site. To create a custom theme, follow these steps:a. In your Magento root directory, create a folder for your custom theme. For example, let’s call it
MyTheme
.b. In the
app/design/frontend
directory, create a directory structure that matches the following path:VendorName/MyTheme
.c. In your
MyTheme
directory, create atheme.xml
file to declare your theme. Here’s a basic example:<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>My Themetitle> <parent>Magento/lumaparent> theme>
d. Create a
registration.php
file in theMyTheme
directory.e. Now, your custom theme is registered.
-
Override .less Files:
To change the font size, you need to override the .less files. Copy the .less file(s) from the Luma theme that you want to modify to your custom theme and make changes there. You’ll typically be looking at files in theapp/design/frontend/Magento/luma/web/css/source
directory. For example, if you want to change font sizes in the header, you can copyheader.less
.a. Create a
_extend.less
file in your custom theme directory to include your customizations:/* app/design/frontend/VendorName/MyTheme/web/css/source/_extend.less */ @import 'source/_my-custom-styles.less'; // Import your custom styles
b. In your
_my-custom-styles.less
file, define your custom font sizes:/* app/design/frontend/VendorName/MyTheme/web/css/source/_my-custom-styles.less */ .page-header { font-size: 20px; // Change the font size to your desired value }
-
Compile the .less Files:
After making these changes, you need to compile the .less files. You can do this via the command line in your Magento root directory:bin/magento setup:static-content:deploy bin/magento setup:upgrade bin/magento cache:clean
Be sure to replace
VendorName
with your actual vendor name andMyTheme
with the name of your custom theme. -
Apply the Custom Theme:
In the Magento Admin Panel, navigate toContent > Design > Themes
. You should be able to select your custom theme now. Apply it to the store you want to customize.
After following these steps, your font size changes should be applied to your Magento store while keeping your customizations separate from the core Luma theme, making it easier to maintain and update your site in the future.