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

Featured templates

PrestaShop 1.6.x. How to add a custom font

This tutorial shows how to add a custom font in PrestaShop 1.6.

PrestaShop 1.6.x. How to add a custom font

Sometimes you need to install other fonts instead of Google web fonts.

  1. Look for a free webfont using any search engine you prefer (Google, Yahoo, etc.), for example, http://www.fontsquirrel.com.

  2. Select the webfont you like by clicking on the download button and save it on your computer:

    PrestaShop_1.6_How_to_add_a_custom_font_1

    Make sure the font type is either TTF (True Type Font) or OTF (Open Type Font).

  3. Navigate to http://www.font2web.com/ and click on the “Browse…” button to choose the downloaded .ttf/.otf font file.

  4. Once the font file is uploaded, click on the “Convert and Download” button to download converted font to your machine:

    PrestaShop_1.6_How_to_add_a_custom_font_2

  5. Upload the converted font package to the themes/theme_number/fonts folder of the site directory via FTP or hosting cPanel and make sure to unzip the font files to the fonts folder itself:

    PrestaShop_1.6_How_to_add_a_custom_font_3

  6. Copy the code from fonts.css from the font package and paste to themes/theme_number/css/global.css or stylesheet.css (depending on your template) after this code section adding the direct link to the font in the format your_site_url.com/themes/theme_number/fonts/font_file:

     /* FONT PATH
      * -------------------------- */

    PrestaShop_1.6_How_to_add_a_custom_font_4

  7. Add the font-family css code from fonts.css to the needed element, for example, we will add this code to themes/theme_number/css/modules/tmmegamenu/views/css/tmmegamenu.css to change the menu items font:

    .top_menu > ul > li > a {
      font-family: 'Conv_AbrilFatface-Regular' !important;
      }
      

    PrestaShop_1.6_How_to_add_a_custom_font_5

    Follow this tutorial to track the needed code.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to add a custom font