Google font not picked up in custom css

Using a child theme, I have added some custom css for a text block. I am trying to use a Google font for the title in that textblock. I have added the code as specified to my functions.php in the child theme:

add_filter( ‘avf_google_heading_font’, ‘avia_add_heading_font’);
function avia_add_heading_font($fonts)
{
$fonts[‘Source Sans Pro’] = ‘Source Sans Pro:300,400,600,700’;
$fonts[‘Skranji’] = ‘Skranji:700’;
return $fonts;
}

add_filter( ‘avf_google_content_font’, ‘avia_add_content_font’);
function avia_add_content_font($fonts)
{
$fonts[‘Source Sans Pro’] = ‘Source Sans Pro:300,400,600,700,400italic,600italic’;
$fonts[‘Skranji’] = ‘Skranji:700’;
return $fonts;
}

The font shows up in the list for General and Advanced styling, but is not displayed when I use it in the style.css in child theme. I’ve tried using as an h1 tag and a span tag. The textblock CSS for ‘meet-content’ works, but the CSS for the h1 tag doesn’t
.meet-content {
margin: 0;
padding-left: 30px;
padding-right: 30px;
}
.meet-content h1 {
font-family: Skranji;
font-weight: 700;
font-size: 68px;
}