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:

   

   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:

   

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:

   

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
     * -------------------------- */

   

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;
     }
     

   

   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