{"id":26579,"date":"2012-12-24T09:17:04","date_gmt":"2012-12-24T14:17:04","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=26579"},"modified":"2016-02-18T08:42:36","modified_gmt":"2016-02-18T13:42:36","slug":"opencart-how-to-change-a-google-web-font","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-how-to-change-a-google-web-font.html","title":{"rendered":"OpenCart. How to change a Google web font"},"content":{"rendered":"<p><\/p>\r\n<p>This tutorial shows how to change a Google web font in OpenCart template.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-1-300x159.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-1\" width=\"300\" height=\"159\" class=\"alignnone size-medium wp-image-26580\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-1-300x159.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-1-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-1.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>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 <a href=\"\/help\/firebug-mozilla-firefox-plugin.html\"> Firebug. Mozilla Firefox plugin <\/a><\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-2-300x163.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-2\" width=\"300\" height=\"163\" class=\"alignnone size-medium wp-image-26581\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-2-300x163.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-2-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-2.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>2. Open file with the link to Google font. In our template link to the Google font code is located in <strong>catalog\\view\\theme\\theme092\\template\\common\\header.tpl<\/strong> file.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-3-300x152.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-3\" width=\"300\" height=\"152\" class=\"alignnone size-medium wp-image-26582\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-3-300x152.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-3-150x76.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-3.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>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<p>3.1. Open <a href=\"http:\/\/www.google.com\/webfonts\">http:\/\/www.google.com\/webfonts<\/a> and Select appropriate font using filters. <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-4-300x162.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-4\" width=\"300\" height=\"162\" class=\"alignnone size-medium wp-image-26583\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-4-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-4-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-4.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>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<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-5-300x166.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-5\" width=\"300\" height=\"166\" class=\"alignnone size-medium wp-image-26584\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-5-300x166.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-5-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-5.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>3.3. Add font to collection and click Use.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-6-300x61.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-6\" width=\"300\" height=\"61\" class=\"alignnone size-medium wp-image-26585\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-6-300x61.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-6-150x30.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-6.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>3.4. Select appropriate character set and Copy generated code.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-7-300x165.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-7\" width=\"300\" height=\"165\" class=\"alignnone size-medium wp-image-26586\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-7-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-7-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-7.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>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<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-8-300x166.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-8\" width=\"300\" height=\"166\" class=\"alignnone size-medium wp-image-26587\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-8-300x166.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-8-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-8.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>5.   Now we need to change the font in css file. In our case stylesheet.css should be modified. Search appropriate code in css file.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-9.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-9-300x154.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-9\" width=\"300\" height=\"154\" class=\"alignnone size-medium wp-image-26588\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-9-300x154.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-9-150x77.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-9.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>6. Scroll down to the page with Google font and copy font to your css file.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-10.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-10-300x165.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-10\" width=\"300\" height=\"165\" class=\"alignnone size-medium wp-image-26589\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-10-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-10-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-10.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>7. Modified code should look like on the screenshot below.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-11.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-11-300x168.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-11\" width=\"300\" height=\"168\" class=\"alignnone size-medium wp-image-26590\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-11-300x168.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-11-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-11.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>8. Refresh home page and check how menu looks.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-12.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-12-300x162.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_OpenCart-12\" width=\"300\" height=\"162\" class=\"alignnone size-medium wp-image-26591\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-12-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-12-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_OpenCart-12.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=dWegR6FIN6U?width=1280&amp;height=720&amp;autoplay=0\" rel=\"prettyPhoto\">OpenCart. How to change a Google web font<\/a><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to change a Google web font in OpenCart template.<\/p>\n","protected":false},"author":39,"featured_media":26593,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[1183,688,929,1157],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26579"}],"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=26579"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26579\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/26593"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=26579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=26579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=26579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}