Docs

[Patrick]

Hi there, sorry to bother you with a Google Font topic. But I read all topics about this on the forum, tried a lot but I’m not able to find it working on the website that I’m working on.

Well the fonts are loading when I view the website on my computer see attached screen dump of my view. But when I visit the website on another device the fonts aren’t showing correctly. They are shown as a Times like font.

This is what I did.

1. found the google font I want to use. Amatic via Google Fonts.
2. copied the code (into the function.php file):

add_action(‘wp_head’, ‘head_style_costume’);

function head_style_costume() { ?>
<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=Amatic+SC:400,700&#8243; media=”screen”>
<link rel=”stylesheet” type=”text/css” href=“renew.css” media=”screen”>
<?php }

3. Even copied the code: @import url(‘https://fonts.googleapis.com/css?family=Amatic+SC:400,700&#8217;); and pasted into my style.css file

The website url is: : http://www.praktijkmamalogisch.nl/doula/ (50% of the page you’ll see the block note that I changed into Amatic, also the text in mobile menu).

I think I missed something. But what? Thanks in advance!

Best. Patrick

[Jade]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Patrick]

This reply has been marked as private.

[Jade]

Hi Patrick,

I’d advise that you setup a child theme. Then add this code in the child theme’s functions.php:

add_action( 'wp_enqueue_scripts', 'load_font' ); 
 
function load_font() {	

	wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css?family=Amatic+SC' );
}

And add this in the custom CSS:

.h-custom-headline span {
    font-family: 'Amatic SC', cursive;
}

Hope this helps.

[Patrick]

Nice Jade! Thank you so much. The regular font is showing now correctly. Is there a way to show the 700 (bold) version?

[Rue Nel]

Hello There,

Thanks for updating in! To add the 700 bold, please have the code updated and use this:

add_action( 'wp_enqueue_scripts', 'load_font' );  
function load_font() {	
	wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css?family=Amatic+SC:400,700' );
}

Please let us know if this works out for you.

[Author]

Posts