How to Change Fonts in AMP

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 -> AMP option panel -> Design -> Global -> you will see Typography option there.

Step 1 – To change the Font in AMP you have to go to the Typography section and enable the Google Fonts option in the AMPforWP plugin.

Step 2 – Once you enable the google fonts options then you need to enter  Google Font API key field.

Step 3 – You can get Google API key the Link from here

After going to this link you will see “Get a key button” click on that button then one popup box will appear from the popup box select my project option.

Then click on next you will get Google API key copy that key and paste into google font API option.

Step 4 – 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.

  • Google Font API key: In this field, you can enter the Google API key and click on the verify button.
  • Global Font Family: In this option, the font family dropdown list will be displayed. you can select which font family you want this font globally change.
  • Global Font Weight Selector: 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.

  • Content Font Selector: If you enable this option below the option will be displayed.
  • Content Font Family Selector: In this option dropdown list will be displayed By using this option it will be applied only for content.
  • Content Font Family Weight Selector: 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.
  • After selecting any one option click on “Save Changes” button.

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
Talha

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…

4 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