{"id":26482,"date":"2012-12-24T09:59:19","date_gmt":"2012-12-24T14:59:19","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=26482"},"modified":"2017-02-22T05:15:59","modified_gmt":"2017-02-22T10:15:59","slug":"drupal-how-to-change-a-google-web-font","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/drupal-how-to-change-a-google-web-font.html","title":{"rendered":"Drupal. 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 in Drupal template.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-1-300x163.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-1\" width=\"300\" height=\"163\" class=\"alignnone size-medium wp-image-26483\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-1-300x163.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-1-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-1.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>1. Lets change font for the text highlighted on the screenshot above. Locate the font that is 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_Drupal-2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-2-300x160.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-2\" width=\"300\" height=\"160\" class=\"alignnone size-medium wp-image-26484\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-2-300x160.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-2-150x80.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-2.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>2. In our template font is imported to style.css file which is located in \\sites\\all\\themes\\themeXXX\\css\\ folder (XXX are actual theme numbers).<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-3-300x119.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-3\" width=\"300\" height=\"119\" class=\"alignnone size-medium wp-image-26485\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-3-300x119.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-3-150x59.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-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_Drupal-4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-4-300x176.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-4\" width=\"300\" height=\"176\" class=\"alignnone size-medium wp-image-26486\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-4-300x176.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-4-150x88.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-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 characters 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_Drupal-5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-5-300x176.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-5\" width=\"300\" height=\"176\" class=\"alignnone size-medium wp-image-26487\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-5-300x176.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-5-150x88.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-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_Drupal-6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-6-300x162.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-6\" width=\"300\" height=\"162\" class=\"alignnone size-medium wp-image-26488\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-6-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-6-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-6.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>3.4. Select appropriate character set. Go to import tab and copy generated code.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-7-300x158.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-7\" width=\"300\" height=\"158\" class=\"alignnone size-medium wp-image-26489\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-7-300x158.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-7-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-7.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>4.  Replace original code 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_Drupal-8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-8-300x123.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-8\" width=\"300\" height=\"123\" class=\"alignnone size-medium wp-image-26490\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-8-300x123.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-8-150x61.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-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. Search appropriate code in style.css file.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-9.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-9-300x145.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-9\" width=\"300\" height=\"145\" class=\"alignnone size-medium wp-image-26491\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-9-300x145.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-9-150x72.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-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_Drupal-10.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-10-300x176.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-10\" width=\"300\" height=\"176\" class=\"alignnone size-medium wp-image-26492\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-10-300x176.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-10-150x88.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-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_Drupal-11.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-11-300x141.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-11\" width=\"300\" height=\"141\" class=\"alignnone size-medium wp-image-26493\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-11-300x141.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-11-150x70.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-11.png 900w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>8. Clear Drupal cache. Information on how to clear Drupal cache you can find at <a href=\"\/help\/drupal-how-to-clear-cache.html\">Drupal. How to clear cache<\/a><\/p>\r\n<p>9. Refresh home page and check how your text looks.<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-12.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-12-300x149.png\" alt=\"\" title=\"How_to_change_a_Google_web_font_Drupal-12\" width=\"300\" height=\"149\" class=\"alignnone size-medium wp-image-26494\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-12-300x149.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-12-150x74.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/12\/How_to_change_a_Google_web_font_Drupal-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=dNW7V5zMe3w?width=1280&amp;height=720&amp;autoplay=0\" rel=\"prettyPhoto\">Joomla 3.x. How to install engine and template on localhost<\/a><\/p>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to change a Google web font in Drupal template.<\/p>\n","protected":false},"author":39,"featured_media":26496,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[723],"tags":[2564,1183,593,688,929],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26482"}],"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=26482"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/26482\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/26496"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=26482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=26482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=26482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}