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

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.

Go to AMP settings > Design Section > Custom CSS option.

how to change font style in AMP
how to change font style in AMP

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

Color property lets you change 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.

Updated on November 4, 2017

Was this article helpful?

Related Articles

Add A Comment