{"id":26613,"date":"2012-12-24T09:22:10","date_gmt":"2012-12-24T14:22:10","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=26613"},"modified":"2017-08-17T06:12:51","modified_gmt":"2017-08-17T10:12:51","slug":"wordpress-how-to-change-a-google-web-font","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-change-a-google-web-font.html","title":{"rendered":"WordPress. How to change a Google web font"},"content":{"rendered":"<p>\r\n<\/p>\r\n<p>This tutorial shows how to change a Google web font\tin  WordPress template.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-1-300x163.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-1\" width=\"300\" height=\"163\" class=\"alignnone size-medium wp-image-26614\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-1-300x163.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-1-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-1.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\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_WordPress-2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-2-300x161.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-2\" width=\"300\" height=\"161\" class=\"alignnone size-medium wp-image-26615\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-2-300x161.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-2-150x80.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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>theme1886\\header.php <\/strong>file.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-3-300x139.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-3\" width=\"300\" height=\"139\" class=\"alignnone size-medium wp-image-26616\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-3-300x139.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-3-150x69.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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_WordPress-4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-4-300x162.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-4\" width=\"300\" height=\"162\" class=\"alignnone size-medium wp-image-26617\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-4-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-4-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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_WordPress-5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-5-300x166.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-5\" width=\"300\" height=\"166\" class=\"alignnone size-medium wp-image-26618\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-5-300x166.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-5-150x83.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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_WordPress-6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-6-300x61.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-6\" width=\"300\" height=\"61\" class=\"alignnone size-medium wp-image-26619\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-6-300x61.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-6-150x30.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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_WordPress-7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-7-300x165.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-7\" width=\"300\" height=\"165\" class=\"alignnone size-medium wp-image-26620\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-7-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-7-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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_WordPress-8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-8-300x133.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-8\" width=\"300\" height=\"133\" class=\"alignnone size-medium wp-image-26621\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-8-300x133.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-8-150x66.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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 normlize.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_WordPress-9.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-9-300x135.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-9\" width=\"300\" height=\"135\" class=\"alignnone size-medium wp-image-26622\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-9-300x135.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-9-150x67.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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_WordPress-10.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-10-300x165.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-10\" width=\"300\" height=\"165\" class=\"alignnone size-medium wp-image-26623\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-10-300x165.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-10-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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_WordPress-11.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-11-300x161.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-11\" width=\"300\" height=\"161\" class=\"alignnone size-medium wp-image-26624\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-11-300x161.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-11-150x80.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-11.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>8. Refresh home page and check how your site looks. We have changed google font.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-12.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-12-300x163.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_WordPress-12\" width=\"300\" height=\"163\" class=\"alignnone size-medium wp-image-26625\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-12-300x163.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-12-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_WordPress-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=sZvd0FE8Ilc?width=1280&amp;height=720&amp;autoplay=0\" rel=\"prettyPhoto\">WordPress. How to change a Google web font<\/a><\/p>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to change a Google web font\tin WordPress template.<\/p>\n","protected":false},"author":39,"featured_media":26627,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1183,688,929,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26613"}],"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=26613"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26613\/revisions"}],"predecessor-version":[{"id":82835,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26613\/revisions\/82835"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/26627"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=26613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=26613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=26613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}