{"id":12084,"date":"2011-11-21T05:44:04","date_gmt":"2011-11-21T10:44:04","guid":{"rendered":"http:\/\/info.template-help.com\/?p=12084"},"modified":"2017-03-27T05:14:09","modified_gmt":"2017-03-27T09:14:09","slug":"how-to-use-the-google-web-fonts-api","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-use-the-google-web-fonts-api.html","title":{"rendered":"How to use the Google Web Fonts API"},"content":{"rendered":"<p>Hello! This video tutorial shows how to <strong>use Google Web Fonts API<\/strong> to add web fonts to your <a href=\"https:\/\/www.templatemonster.com\/website-templates.php\" title=\"HTML pages\" target=\"_blank\">HTML pages<\/a>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/4_2hp8-BWec\"><\/iframe>\r\n<\/div>\r\n<p>You may want to use custom web fonts on your HTML website to apply them to specific elements of your pages.<\/p>\r\n<p>Let&#8217;s learn how to do that.<\/p>\r\n<p>Firstly you need to get the <strong>link rel attribute<\/strong> for the font you want to add to your site.\r\n\t<ol>\r\n\t\t<li>\r\n\t\t\t<p>Navigate to <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\">Google Web Fonts<\/a> site and choose the font you want to use.<\/p>\r\n\t\t\t<p>Use the filter on the right hand side to get fonts options that fit your needs:<\/p>\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_1.png\" alt=\"website_use_google_web_font_api_1\" width=\"960\" height=\"719\" class=\"alignnone size-full wp-image-79172\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_1.png 960w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_1-150x112.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_1-300x225.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_1-768x575.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/a>\t\t\t\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>Hover the desired font name and click <strong>&#8220;See Specimen&#8221;<\/strong> button:<\/p>\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_2.png\" alt=\"website_use_google_web_font_api_2\" width=\"1042\" height=\"720\" class=\"alignnone size-full wp-image-79173\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_2.png 1042w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_2-150x104.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_2-300x207.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_2-768x531.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_2-1024x708.png 1024w\" sizes=\"(max-width: 1042px) 100vw, 1042px\" \/><\/a>\t\t\t\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>On the font page check the font description to make sure this is the font you need.<\/p>\r\n\t\t\t<p>Then, click <strong>&#8220;Select This Font&#8221;<\/strong> button at the upper right:<\/p>\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_3.png\" alt=\"website_use_google_web_font_api_3\" width=\"1268\" height=\"720\" class=\"alignnone size-full wp-image-79174\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_3.png 1268w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_3-150x85.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_3-300x170.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_3-768x436.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_3-1024x581.png 1024w\" sizes=\"(max-width: 1268px) 100vw, 1268px\" \/><\/a>\r\n\t\t\t\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>Now that the font is selected, click the bar which appeared at the bottom right corner of the screen:<\/p>\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_4.png\" alt=\"website_use_google_web_font_api_4\" width=\"1232\" height=\"666\" class=\"alignnone size-full wp-image-79175\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_4.png 1232w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_4-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_4-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_4-768x415.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_4-1024x554.png 1024w\" sizes=\"(max-width: 1232px) 100vw, 1232px\" \/><\/a>\r\n\t\t\t\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>At the appeared popup look for the <strong>embed code<\/strong>:<\/p>\r\n\t\t\t<pre class=\"brush:html\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\"&gt;<\/pre>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>Copy the code to the clipboard and paste it to the<strong> head tag<\/strong> of your <strong>index.html<\/strong> file:<\/p>\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_5.png\" alt=\"website_use_google_web_font_api_5\" width=\"1200\" height=\"553\" class=\"alignnone size-full wp-image-79176\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_5.png 1200w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_5-150x69.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_5-300x138.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_5-768x354.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_5-1024x472.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a>\r\n\t\t\t\r\n\t\t\t<p>Do not forget to save the file to apply changes.<\/p>\r\n\t\t\t<p class=\"attention\">You will need to include the font to each of your HTML files.<\/p>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>Now, navigate back to the font page and look for <strong>CSS rule<\/strong> there:<\/p>\r\n\t\t\t<pre class=\"brush:css\">font-family: 'Roboto', sans-serif;<\/pre>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>Use this rule for the <strong>CSS selector<\/strong> of desired section on your site, e.g.:<\/p>\r\n\t\t\t<pre class=\"brush:css\">body {\r\n\tfont-family: 'Roboto', sans-serif;\r\n}<\/pre>\r\n\t\t\t<p>The above <strong>CSS rule<\/strong> will apply the newly added <strong>Roboto<\/strong> <strong>font<\/strong> to the <strong>body text<\/strong> of your website:<\/p>\r\n\t\t\t\r\n\t\t<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_6.png\" alt=\"website_use_google_web_font_api_6\" width=\"982\" height=\"507\" class=\"alignnone size-full wp-image-79177\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_6.png 982w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_6-150x77.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_6-300x155.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_6-768x397.png 768w\" sizes=\"(max-width: 982px) 100vw, 982px\" \/><\/a>\r\n\t\t\t\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>Save the file to apply changes.<\/p>\r\n\t\t<\/li>\r\n\t\t<li>\r\n\t\t\t<p>Navigate to your site and refresh the page to see changes.<\/p>\r\n\t\t\t<p>You can see the <strong>Roboto font<\/strong> is applied to the body text of your site now:<\/p>\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_7.png\" alt=\"website_use_google_web_font_api_7\" width=\"1280\" height=\"690\" class=\"alignnone size-full wp-image-79178\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_7.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_7-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_7-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_7-768x414.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/11\/website_use_google_web_font_api_7-1024x552.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\t\r\n\t\t<\/li>\r\n\t<\/ol>\r\n<p>This is the end of the tutorial. Now you know how to use Google Web Fonts API to add web fonts to your HTML pages.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=4_2hp8-BWec?width=1280&amp;height=720\" rel=\"prettyPhoto\">How to use the Google Web Fonts API<\/a>","protected":false},"excerpt":{"rendered":"<p>Hello! This video tutorial shows how to <strong>use Google Web Fonts API<\/strong> to add web fonts to your HTML pages.<\/p>\n","protected":false},"author":68,"featured_media":79180,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[272],"tags":[1102,789,688,929],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/12084"}],"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\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=12084"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/12084\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/79180"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=12084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=12084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=12084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}