{"id":123,"date":"2017-03-09T08:15:46","date_gmt":"2017-03-09T08:15:46","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?p=123"},"modified":"2020-05-07T11:10:33","modified_gmt":"2020-05-07T11:10:33","slug":"how-to-change-font-style-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-change-font-style-in-amp\/","title":{"rendered":"How to Change Font Style in AMP"},"content":{"rendered":"\n<p>Yes, it is possible to Change Font Style in AMP. You can change the font style in AMP with the help of Custom CSS.<\/p>\n\n\n\n<p><strong>Follow this simple steps:<\/strong><\/p>\n\n\n\n<p>First, go to the <strong>WordPress Admin Area<\/strong> -&gt; <strong>AMP option panel<\/strong> -&gt; <strong>Design<\/strong> -&gt; <strong>Global<\/strong> -&gt; <strong>Custom CSS option<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/19-1.png\"><img decoding=\"async\" loading=\"lazy\" width=\"391\" height=\"383\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/19-1.png\" alt=\"\" class=\"wp-image-16255\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/19-1.png 391w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/19-1-300x294.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/19-1-50x50.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/19-1-60x60.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/19-1-100x98.png 100w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Scroll down a little to see this option<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-4.png\"><img decoding=\"async\" loading=\"lazy\" width=\"936\" height=\"341\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-4.png\" alt=\"\" class=\"wp-image-10344\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-4.png 936w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-4-300x109.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-4-768x280.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-4-50x18.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-4-60x22.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-4-100x36.png 100w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Here is an example:<\/strong><\/p>\n\n\n\n<p>First of all, inspect Element where you want to change the Font style.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/1-1.png\"><img decoding=\"async\" loading=\"lazy\" width=\"496\" height=\"541\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/1-1.png\" alt=\"Inspect Hello World \" class=\"wp-image-126\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/1-1.png 496w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/1-1-275x300.png 275w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/a><figcaption>Inspect Hello World<\/figcaption><\/figure><\/div>\n\n\n\n<p>In the above Screenshot, you can see Inspecting Hello World and also the Class name of Hello World i.e.,&nbsp;<strong>h1 .amp-wp-title<\/strong><\/p>\n\n\n\n<p>You can also look check HTML to find the class name, please refer to the below screenshot<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-1.png\"><img decoding=\"async\" loading=\"lazy\" width=\"453\" height=\"540\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-1.png\" alt=\"html to find class name\" class=\"wp-image-127\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-1.png 453w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/2-1-252x300.png 252w\" sizes=\"(max-width: 453px) 100vw, 453px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>here you can see the Class name of Hello World. With the help of class you can start styling. You can change font style, you can change font color etc.<\/p>\n\n\n\n<p>Before Adding Custom CSS, you can test your CSS. Paste your CSS in Styles section of your Browser. Please refer to this screenshot<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/3-1.png\"><img decoding=\"async\" loading=\"lazy\" width=\"331\" height=\"543\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/3-1.png\" alt=\"Css test and run\" class=\"wp-image-128\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/3-1.png 331w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/03\/3-1-183x300.png 183w\" sizes=\"(max-width: 331px) 100vw, 331px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>in&nbsp;<strong>h1 .amp-wp-title<\/strong>&nbsp;you can do modifications according to your requirements<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">h1 .amp-wp-title {\n font-family: Lato;\n font-weight: bold;\n font-size: 20px;\n color: red;\n }<\/pre><\/div>\n\n\n\n<ul><li>font-family Changes the Font Style of your website<\/li><li>font-weight changes your text look strong or normal<\/li><li>font-size lets you change the size of your text font<\/li><li>The color property lets you change the color of your text<\/li><li>There are plenty of other CSS properties you can use according to your requirement.<\/li><li>When you are ready with the code, simply paste that code in <strong>Custom CSS Editor&nbsp;<\/strong>which can be found under the Design Section in AMP settings.<\/li><\/ul>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\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>Yes, it is possible to Change Font Style in AMP. You can change the font style in AMP with the help of Custom CSS. Follow this simple steps: First, go to the WordPress Admin Area -&gt; AMP option panel -&gt; Design -&gt; Global -&gt; Custom CSS option Scroll down a&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[14],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/123"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":15,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/123\/revisions"}],"predecessor-version":[{"id":17274,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/123\/revisions\/17274"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=123"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}