{"id":26596,"date":"2012-12-24T09:36:29","date_gmt":"2012-12-24T14:36:29","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=26596"},"modified":"2015-09-17T08:51:05","modified_gmt":"2015-09-17T12:51:05","slug":"zencart-how-to-change-a-google-web-font","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/zencart-how-to-change-a-google-web-font.html","title":{"rendered":"ZenCart. How to change a Google web font"},"content":{"rendered":"

This tutorial shows how to change a Google web font\tin ZenCart template.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

1. Lets change font for menu items. Find font that used for particular text on your template using Firebug software. Information on how to use firebug you can find at Firebug. Mozilla Firefox plugin<\/a><\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

2. Open file with the link to Google font. In our template link to the Google font code is located in includes\\templates\\theme592\\common\\html_header.php<\/strong> file.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

3. We need to replace this font with modified one or just add line with the new font in case original font will be used as well.<\/p>\r\n

3.1. Open http:\/\/www.google.com\/webfonts<\/a> and Select appropriate font using filters. <\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

3.2. Pay attention to character set. Select font that supports your character set. We have selected Cyrillic Extended in order to be able to use Cyrillic fonts.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

3.3. Add font to collection and click Use.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

3.4. Select appropriate character set and Copy generated code.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

4. Replace original code in file or just add code in case you are going to use old font as well. Modified code you can see on the screenshot below.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

5. Now we need to change the font in css file. In our case stylesheet_header_menu.css<\/strong> should be modified. Search appropriate code in css file.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

6. Scroll down to the page with google font and copy font to your css file.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

7. Modified code should look like on the screenshot below.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

8. Refresh home page and check how menu looks.<\/p>\r\n\r\n\"\"<\/a>\r\n\r\n

Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nZenCart. How to change a Google web font<\/a>","protected":false},"excerpt":{"rendered":"

This tutorial shows how to change a Google web font\tin ZenCart template.<\/p>\n","protected":false},"author":39,"featured_media":26610,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[734],"tags":[1183,688,929,2408],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26596"}],"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\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=26596"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26596\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/26610"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=26596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=26596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=26596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}