Increase font size in Magento Luma Theme

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:

1. 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 a theme.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 the MyTheme directory.

   e. Now, your custom theme is registered.

2. 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 the app/design/frontend/Magento/luma/web/css/source directory. For example, if you want to change font sizes in the header, you can copy header.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
   }
   

3. 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 and MyTheme with the name of your custom theme.

4. Apply the Custom Theme:
   In the Magento Admin Panel, navigate to Content > 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.