Added Prata font, but font used says Times New Roman

Hello,

I added the Prate font downloaded from Google font and followed the steps on Adding Local Fonts:
https://docs.generatepress.com/article/adding-local-fonts/

1. Downloaded, unzipped, and uploaded the font files in my /themes/childthemname/fonts directory
2. Copied the CSS ( for best support) in my child theme style.css file

/* prata-regular - latin */
@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/prata-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Prata Regular'), Local('Prata-Regular'),
       url('../fonts/prata-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/prata-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/prata-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/prata-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/prata-v13-latin-regular.svg#Prata') format('svg'); /* Legacy iOS */
}

3. Added it to the Customizer by adding the filter in child theme functions.php:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Prata';

    return $fonts;
} );

4. Now when I use the fon in the customizer and set my Hi & H2 to this Prata font, then I use the inspect function in Firefox, it says H2 is set to Prate font but in the fonts tab, it says Fonts Used Times New Roman.
What steps am I missing?
Here is the screenshot of my inspect screen:
https://imgur.com/a/eM3Qdqf
Any help/pointers are greatly appreciated!
TIA!