{"id":4523,"date":"2018-04-04T14:23:24","date_gmt":"2018-04-04T14:23:24","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=4523"},"modified":"2020-02-25T07:54:36","modified_gmt":"2020-02-25T07:54:36","slug":"how-to-change-fonts-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-change-fonts-in-amp\/","title":{"rendered":"How to Change Fonts in AMP"},"content":{"rendered":"<p>In this tutorial, we are going to see how to use Google Fonts In AMP<\/p>\n<p><strong>Follow the steps below to Change Fonts in AMP:<\/strong><\/p>\n<p>Go to this<strong> WordPress admin area<\/strong> -&gt; <strong>AMP option panel<\/strong> -&gt; <strong>Design<\/strong> -&gt; <strong>Global<\/strong> -&gt; you will see <strong>Typography option<\/strong> there.<\/p>\n<p><mark style=\"background-color: yellow;\"><strong>Step 1<\/strong><\/mark> &#8211; To change the Font in AMP you have to go to the Typography section and enable the Google Fonts option in the AMPforWP plugin.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6887\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font.png\" alt=\"\" width=\"1159\" height=\"394\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font.png 1159w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-300x102.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-768x261.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-1024x348.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-50x17.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-60x20.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-100x34.png 100w\" sizes=\"(max-width: 1159px) 100vw, 1159px\" \/><\/a><\/p>\n<p><mark style=\"background-color: yellow;\"><strong>Step 2<\/strong><\/mark> &#8211; Once you enable the google fonts options then you need to enter\u00a0 <strong>Google Font API<\/strong> key field.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/google-font-api-key.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5984\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/google-font-api-key.png\" alt=\"\" width=\"856\" height=\"165\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/google-font-api-key.png 856w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/google-font-api-key-300x58.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/google-font-api-key-768x148.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/google-font-api-key-50x10.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/google-font-api-key-60x12.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/google-font-api-key-100x19.png 100w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/a><\/p>\n<p><mark style=\"background-color: yellow;\"><strong>Step 3<\/strong><\/mark> &#8211; You can get <strong>Google API key<\/strong> the Link <a href=\"https:\/\/developers.google.com\/fonts\/docs\/developer_api?refresh=1&amp;pli=1#APIKey\" target=\"_blank\" rel=\"noopener noreferrer\">from here<\/a><\/p>\n<p>After going to this link you will see<strong> &#8220;Get a key button&#8221;<\/strong> click on that button then one popup box will appear from the popup box select my project option.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/enable-web-font-developer-api.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5987\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/enable-web-font-developer-api.png\" alt=\"\" width=\"602\" height=\"356\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/enable-web-font-developer-api.png 602w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/enable-web-font-developer-api-300x177.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/enable-web-font-developer-api-50x30.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/enable-web-font-developer-api-60x35.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/enable-web-font-developer-api-100x59.png 100w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/a><\/p>\n<p>Then click on next you will get Google API key copy that key and paste into google font API option.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/your-api-key-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5989\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/your-api-key-1.png\" alt=\"\" width=\"604\" height=\"314\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/your-api-key-1.png 604w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/your-api-key-1-300x156.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/your-api-key-1-50x26.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/your-api-key-1-60x31.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/your-api-key-1-100x52.png 100w\" sizes=\"(max-width: 604px) 100vw, 604px\" \/><\/a><\/p>\n<p><mark style=\"background-color: yellow;\"><strong>Step 4<\/strong><\/mark> &#8211; After entering Google FONT API key you will see Font selector option and from the drop-down, you can select any Font you want to use in your AMP version of the website.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-family-list.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5991\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-family-list.png\" alt=\"\" width=\"788\" height=\"527\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-family-list.png 788w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-family-list-300x201.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-family-list-768x514.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-family-list-50x33.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-family-list-60x40.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/font-family-list-100x67.png 100w\" sizes=\"(max-width: 788px) 100vw, 788px\" \/><\/a><\/p>\n<ul>\n<li><strong>Google Font API key:<\/strong> In this field, you can enter the Google API key and click on the verify button.<\/li>\n<li><strong>Global Font Family:<\/strong> In this option, the font family dropdown list will be displayed. you can select which font family you want this font globally change.<\/li>\n<li><strong>Global Font Weight Selector:<\/strong> In this option of Font weight selector, you can apply a style to the Font like regular, bolder,700, italic etc. this font weight globally change.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/content-font-family-selector.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-5995\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/content-font-family-selector.png\" alt=\"\" width=\"874\" height=\"546\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/content-font-family-selector.png 874w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/content-font-family-selector-300x187.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/content-font-family-selector-768x480.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/content-font-family-selector-50x31.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/content-font-family-selector-60x37.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2018\/04\/content-font-family-selector-100x62.png 100w\" sizes=\"(max-width: 874px) 100vw, 874px\" \/><\/a><\/p>\n<ul>\n<li><strong>Content Font Selector:\u00a0<\/strong>If you enable this option below the option will be displayed.<\/li>\n<li><strong>Content Font Family Selector:<\/strong> In this option dropdown list will be displayed By using this option it will be applied only for content.<\/li>\n<li><strong>Content Font Family Weight Selector: <\/strong>In this option of Content Font weight selector, you can apply a style to the Font like regular, bolder,700, italic, etc. By using this option it will be applied only for content.<\/li>\n<li>After selecting any one option click on &#8220;<strong>Save Changes<\/strong>&#8221; button.<\/li>\n<\/ul>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we are going to see how to use Google Fonts In AMP Follow the steps below to Change Fonts in AMP: Go to this WordPress admin area -&gt; AMP option panel -&gt; Design -&gt; Global -&gt; you will see Typography option there. Step 1 &#8211; To change&#8230;<\/p>\n","protected":false},"author":15,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[84],"ht-kb-tag":[134,135],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4523"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=4523"}],"version-history":[{"count":26,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4523\/revisions"}],"predecessor-version":[{"id":16611,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/4523\/revisions\/16611"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=4523"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=4523"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=4523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}