How to Add Baloo 2 font in my Amp Pages

Hello @immmukeshpatel

Thank you for reaching out to us, You can add custom fonts to AMP website by simply including it with <link> tag or by doing @font-face in css files. Please check the documentation for adding custom fonts in your AMP website.

We hope this helps!

• This reply was modified 9 months, 1 week ago by Milind More.
• This reply was modified 9 months, 1 week ago by Milind More.

where i can Poat this, i know @font-face, i can do From google Font, But Where can i Paste this, in Function.php or Normal Header in Primary theme

Hello @immmukeshpatel

As I checked your website, it seems you are using Reader Mode with theme twenty sixteen, I will recommend creating a child theme.

Please follow below steps:

1. Create directory in /wp-content/themes/twentysixteen-child/

2. Create another directory for fonts /wp-content/themes/twentysixteen-child/fonts/

3. Download your font’s ttf files and upload to directory to /fonts/

4. Create style.css in child theme directory /wp-content/themes/twentysixteen-child/style.css

5. Add CSS below code in style.css file

/**
 * Theme Name: Twenty Sixteen Child
 * Template:   twentysixteen
 * AMP: true
 */

 @font-face {
    font-family: 'Baloo 2';
    src: url('fonts/Baloo2-Regular.ttf') format('woff2'),
         url('fonts/Baloo2-Regular.ttf') format('woff');
  }
  
  body {
    font-family: 'Baloo 2', sans-serif;
  }

5 Create functions.php in /wp-content/themes/twentysixteen-child/functions.php

6. Add below code

<?php

add_action( 'wp_enqueue_scripts', 'twenty_sixteen_child_enqueue_styles' );

function twenty_sixteen_child_enqueue_styles() {
	wp_enqueue_style( 
		'twenty-sixteen-childstyle', 
		get_parent_theme_file_uri( 'style.css' )
	);
}

7. Once you added the child theme, select it from AMP Reader Mode settings you should be able see font in action.

You can learn more from our documentation

We hope this helps!

• This reply was modified 9 months, 1 week ago by Milind More.

THANK YOU