Clicky

  1. Home
  2. How To
  3. How to Change Font Style in AMP
Searching...

How to Change Font Style in AMP

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 -> AMP option panel -> Design -> Global -> Custom CSS option

Scroll down a little to see this option

Here is an example:

First of all, inspect Element where you want to change the Font style.

Inspect Hello World
Inspect Hello World

In the above Screenshot, you can see Inspecting Hello World and also the Class name of Hello World i.e., h1 .amp-wp-title

You can also look check HTML to find the class name, please refer to the below screenshot

html to find class name

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.

Before Adding Custom CSS, you can test your CSS. Paste your CSS in Styles section of your Browser. Please refer to this screenshot

Css test and run

in h1 .amp-wp-title you can do modifications according to your requirements

h1 .amp-wp-title {
 font-family: Lato;
 font-weight: bold;
 font-size: 20px;
 color: red;
 }
  • font-family Changes the Font Style of your website
  • font-weight changes your text look strong or normal
  • font-size lets you change the size of your text font
  • The color property lets you change the color of your text
  • There are plenty of other CSS properties you can use according to your requirement.
  • When you are ready with the code, simply paste that code in Custom CSS Editor which can be found under the Design Section in AMP settings.

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on May 7, 2020
Tagged:

    Are you still looking for a solution?

    Then fill out the below form and we will reach out to you within a few hours.

    Was this article helpful?

    Yes
    No

    Related Articles

    Comments

      1. Hi Andres,

        Will you please elaborate more about your issue so that we will understand and help you.

    2. Changing the font color works for all tags, but it complete ignore h1 .amp-wp-title or h2 .amp-wp-title. I tried to add manually via Console in Chrome, but it does nothing at all.

      1. Hi MD ZOHEB ANSARI,

        Will you please add this code
        h1.amp-wp-title, h2.amp-wp-title {
        color: red;
        }
        you need to add this code in AMP option panel -> Design -> Global -> Custom CSS like this screenshot- – https://take.ms/Oi773 and if you have issue/problem then contact our technical team – https://ampforwp.com/support/ they will help you as soon as possible.

        1. Thank for the reply Sonali. I managed to achieve what I wanted, but that I did with hard code by editing the plugin’s original code. I now have to edit every time the plugin is updated.

          When I write h1.amp-wp-title, it gets a yellow exclamation mark saying that this piece of style code is overqualified. When I put a space between h1 and .amp-wp-title, it doesn’t give any error. However, I still tried to save both the way and it didn’t do anything. The original code overwrites or there is some problem that doesn’t let me use h1.amp-wp-title giving the overqualified error.

          I have a few websites and all seem to have the same issue, that’s certainly a bug or restriction from AMP that I don’t know.

    3. btw design three no have h1 tag on post/single. plugin version 1.0.13

      1. Hi bungfrangki,

        Will you please provide us exact URL where you are having an issue so that we can check and fix it immediately.

    4. Hey, i tried adding custom CSS for editing Paragraph from AMP.

      Class:

      My attempt:

      p .amp-wp-article-content {
      font-family: helvetica;
      font-weight: normal;
      font-size: 18px;
      }

      Neither Your Code for H1 nor mine for Paragraph worked.
      Any idea why that has happened?

      btw. I am using ‘Reader Mode’ of AMP.

    5. Hiello,
      I want to decrease the h1 which is too big by default but by putting this code it does not work :
      h1 .amp-post-title {
      font-size: 15px;
      }
      Why ?
      Thank you

    6. Hello all, can you help me ? i tired my custom css not working in Plugin AMP for wp.

      I want to change size of text ” BSI Salurkan Pembiayaan KPR Bersubsidi dan Non-subsidi”

      Default from AMP Plugin =

      .amp-wp-content.the_content h2 {
      font-size: 27px;
      }

      I custom it =

      .amp-wp-content.the_content h2 {
      font-size: 20px;
      }

      but my code cant work! i give it !important but AMP Disallowed ALL css use

      The page I need help with: https://www.finansialku.com/bsi-salurkan-pembiayaan-kpr-rp-38-triliun-pada-kuartal-i-2021/amp/

    7. For my blog AppleiPhonetips.us I am trying to modify the text font but this more looks like font size for h1 tag in example. We want to change font size of the content been displayed in the article. Please help.

    8. For my blog https://AppleiPhonetips.us/ I am trying to modify the text font but this more looks like font size for h1 tag in example. We want to change font size of the content displayed in the article. Please help.

    Leave a Comment