CODEWITHSUNDEEP
phpcsswordpresshtml
Mike.Whitehead
Mike.Whitehead

Reputation: 818

Wordpress - Google fonts not working / importing correctly

I'm quite new to Wordpress and I'm importing my stylesheets across using the html5blank theme. I've noticed the google fonts aren't applying in the wordpress site.

I have this link in my header.php file - 

<link href='https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i' rel='stylesheet' type='text/css' />

And in my style.css file I have this - 

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i');

body {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
}

Do 'body' rules apply in Wordpress in the same way they would in a front-end situation? Or is there something else I need to add/change?

Upvotes: 0

Views: 4059

Answers (1)

Ferares
Ferares

Reputation: 801

Are you telling wp to load the stlye.css file?

Try doing this to your functions.php file:

function load_styles() {
  wp_enqueue_style('styles', 'path/to/style.css');
}

followed by (if your styles are for the site's front-end):

add_action('wp_enqueue_scripts', 'load_styles');

or (if your styles are for the site's admin panel):

add_action('admin_enqueue_scripts', 'load_styles');

Also, you're adding the fonts twice by doing:

<link href='https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i' rel='stylesheet' type='text/css' />

in your header and:

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i');

in your style.css

Choose either one of those, or you can add it to the "load_styles()" function in your functions.php file:

function load_styles() {
  wp_enqueue_style('styles', 'path/to/style.css');
  wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Merriweather+Sans:100,200,400,700,700i,800,800i');
}

If this doesn't work, please provide more information such as:

  • Are there errors on your browser's developer console?

  • Are the css rules showing up in the dev console?

  • Are the fonts being loaded?

Upvotes: 1

Related Questions