[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

Magento. How to change Megamenu font

In this tutorial we will show you how to change the google web font of the Mega-menu items in Magento templates.

Magento. How to change Megamenu font

The procedure looks the following way:

  1. Inspect the current google web-font used in your mega-menu with the help of Firebug or any other developer tool of your browser:

    Magento_How_to_change_Megamenu_font_1

  2. Go on your server using the hosting cpanel or FTP and navigate to “app/design/frontend/default/themeXXX/template/page/html” directory. Find the head.phtml file and open it with any code editor:

    Magento_How_to_change_Megamenu_font_2

  3. Here you will locate the line with the font assigned to your website:

    Magento_How_to_change_Megamenu_font_3

  4. You need to replace the existing code with a new google-font code or just add the code of the other font in the next line in case you want to use the previous font on some other parts of your site.

  5. Go to the official Google Fonts site and choose the desired font using the filters. Make sure the font supports your character set.

  6. Press the Add to Collection button and then click the Use option at the bottom right:

    Magento_How_to_change_Megamenu_font_4

  7. Choose the appropriate styles and the character sets of the new font. Pay attention to the page load the font is affecting:

    Magento_How_to_change_Megamenu_font_5

  8. Copy the code from the “Add this code to your website” section and paste it on place of the old font-style code in the head.phtml file. Put the code in the next line in case you want to use the old font in some other part of your site:

    Magento_How_to_change_Megamenu_font_6

  9. Find the megamenu.css file in the “skin/frontend/default/themeXXX/css/cmsmart/megamenu” folder on your server and open it with some code editor.

  10. Search for the old font and replace it with the one taken from the Google Fonts site in the “Integrate the fonts into your CSS” field. Save the changes.

  11. Refresh your site and check the new font on the mega-menu.

    Note: In case the changes do not appear, make sure to clear the magneto cache.

We hope the tutorial was useful for you.

Feel free to check the detailed video tutorial below:

Magento. How to change Megamenu font