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

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

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

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.

Share
Published by
Ahmed Kaludi

How to create an AWeber form in AMP

If you want to add an AWeber form in AMP then first you need to…

3 years ago

How to setup webpushr notification in AMP

Webpushr is the fastest growing web push notifications platform that marketers love & developers rely…

3 years ago

How to add Adobe Analytics in AMP

Follow these steps to add Adobe Analytics in AMP Step 1: Go to WordPress Admin Area -> AMP…

3 years ago

What is the CWV plugin all about

Core Web Vitals are the subset of Web Vitals that apply to all web pages,…

4 years ago

How to fix “Alternate page with proper canonical tag” Page Index issue in Google Search Console

The following reasons can be shown for non-indexing. Server error (5xx) Your server returned a 500-level…

4 years ago

Google Analytics ( GA4 ) integration in AMPforWP

We have added the Google Analytics 4 ( GA 4 ) integration in AMPforWP v1.0.80.…

4 years ago