{"id":59098,"date":"2016-01-07T09:07:26","date_gmt":"2016-01-07T14:07:26","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=59098"},"modified":"2016-02-18T03:47:14","modified_gmt":"2016-02-18T08:47:14","slug":"prestashop-1-6-x-how-to-add-a-custom-font","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/prestashop-1-6-x-how-to-add-a-custom-font.html","title":{"rendered":"PrestaShop 1.6.x. How to add a custom font"},"content":{"rendered":"

\r\n

This tutorial shows how to add a custom font<\/strong> in PrestaShop 1.6.<\/p>\r\n

PrestaShop 1.6.x. How to add a custom font<\/a><\/p>\r\n

Sometimes you need to install other fonts instead of Google web fonts<\/a>.<\/p>\r\n

    \r\n
  1. \r\n

    Look for a free webfont using any search engine you prefer (Google, Yahoo, etc.), for example, http:\/\/www.fontsquirrel.com<\/a>.<\/p>\r\n<\/li>\r\n

  2. \r\n

    Select the webfont you like by clicking on the download<\/strong> button and save it on your computer:<\/p>\r\n

    \"PrestaShop_1.6_How_to_add_a_custom_font_1\"<\/a><\/p>\r\n

    Make sure the font type is either TTF (True Type Font)<\/strong> or OTF (Open Type Font)<\/strong>.<\/p>\r\n<\/li>\r\n

  3. \r\n

    Navigate to http:\/\/www.font2web.com\/<\/a> and click on the “Browse…”<\/strong> button to choose<\/strong> the downloaded .ttf\/.otf<\/i><\/strong> font file.<\/p>\r\n<\/li>\r\n

  4. \r\n

    Once the font file is uploaded, click on the “Convert and Download”<\/strong> button to download converted font to your machine:<\/p>\r\n

    \"PrestaShop_1.6_How_to_add_a_custom_font_2\"<\/a>\r\n\t<\/li>\r\n

  5. \r\n

    Upload<\/strong> the converted font package to the themes\/theme_number\/fonts<\/strong> folder of the site directory via FTP or hosting cPanel and make sure to unzip the font files to the fonts<\/strong> folder itself:<\/p>\r\n

    \"PrestaShop_1.6_How_to_add_a_custom_font_3\"<\/a>\r\n\t<\/li>\r\n

  6. \r\n

    Copy<\/strong> the code from fonts.css<\/strong> from the font package and paste to themes\/theme_number\/css\/global.css<\/strong> or stylesheet.css<\/strong> (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<\/i>:<\/p>\r\n

     \/* FONT PATH\r\n  * -------------------------- *\/<\/pre>\r\n
    \"PrestaShop_1.6_How_to_add_a_custom_font_4\"<\/a>\r\n\t<\/li>\r\n
  7. \r\n
    Add the font-family css code<\/strong> from fonts.css<\/strong> to the needed element, for example, we will add this code to themes\/theme_number\/css\/modules\/tmmegamenu\/views\/css\/tmmegamenu.css<\/i>  to change the menu items font:<\/p>\r\n
    .top_menu > ul > li > a {\r\n  font-family: 'Conv_AbrilFatface-Regular' !important;\r\n  }\r\n  <\/pre>\r\n
    \"PrestaShop_1.6_How_to_add_a_custom_font_5\"<\/a><\/p>\r\n
    Follow this tutorial<\/a> to track the needed code.<\/p>\r\n<\/li>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    PrestaShop 1.6.x. How to add a custom font<\/a><\/p>\r\n<\/p>\r\n
    <\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to add a custom font<\/strong> in PrestaShop 1.6.<\/p>\n","protected":false},"author":75,"featured_media":59104,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[732],"tags":[789,688,552],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/59098"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=59098"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/59098\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/59104"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=59098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=59098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=59098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}