- CSS-Tricks

March 21, 2017 at 5:14 pm #253020

Participant

What is easy enough in my mind is to edit the header.php and the style.css files of your theme (one really shouldn’t need to use a plugin for basic HTML/CSS editing).

Suppose you want to use “Source Sans Pro” in two weights, both in the regular and italic version. You can basically follow the instructions on the Google webfont site.

So in header.php somewhere within the <head></head> tags you include the link to the stylesheet like so:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i" rel="stylesheet">

<?php wp_head(); ?>
</head>

And within your style.css you can put it on elements like:

body { 
  font-family: 'Source Sans Pro', Verdana, sans-serif;
}
b,strong,h1,h2,h3,h4,h5,h6 {
  font-weight: 600;
}
i,em,.italic {
  font-style: italic;
}