Loading the fonts
There are 2 methods to load the fonts. You only need one of the two.
Method A: Self hosting fonts
If you're self hosting your fonts, you'll need to convert them to multiple formats. Nowadays 2 should suffice, but you'll be sure it can be used by a bigger percentage of your users. There are services out there that do it for you, like Font Squirrel. Just keep mind that they might block a font from being uploaded if it's not a free font. You should check the lisence of your font before using it on your site. Or you may get a message like this:
ITC has requested that their font ITC Lubalin Graph Std Bold be blacklisted by the
Generator. You will not be able to convert this font.
For this example, we'll use Font Squirrel's generator. Upload your font and download the "kit". You may also need to do multiple batches for different font weights, since there's a limit to the amount you can upload at a time. You'll need to merge the CSS files and fonts generated folder. It might also take a little while to download it, be patient.
Host the ".woff" and ".woff2" files somewhere. You'll need the url to modify the CSS file. Open the "stylesheet.css" file. Here's what I got from the generator:
@font-face {
font-family: 'source_sans_problack';
src: url('sourcesanspro-black-webfont.woff2') format('woff2'),
url('sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
You can change the font-family to the name you want. The url for the sources will need to be changed to point to the server hosting your fonts.
Also important to note that the generator has no idea what the font-weight and font-style of your font is. You should set them. In thie case, it's a "black" font, so we should set the weight to 800 or 900. It's a normal font-style, so you can leave it to normal. This is where you'd specify if it was italic.
You're now ready to add this bit of css to your theme. This will load the font in your site, but will not apply it. That's the next step.
Method B: Using a service
There are many services that give you easy access to hundreds of fonts. Typekit, Fonts.com, or Google Fonts are some examples. Each of these services will give you instructions on how to chose and load their fonts. They're all different. For this example, I'll use Google font, because it's free!
Once you've picked your fonts, you'll get some code to include in your theme. Like for example: Much easier!
Applying the fonts
Next, you'll need to set the font-family in your theme. Each theme will be different, so you should inspect it to figure out where the font styles are applied. You might have more than one styles to overwrite. If you used Method A, you'll want to use the name you specified in the CSS for the font- family. You can just replace the name below. If you've used Method B, you'll be given a snippet of code like this:
font-family: 'Open Sans', sans-serif;
If you don't know what/where fonts are specified in your theme, inspect the text you want to change, then switch over to the "computed" tab in your Chrome dev tools and look for "font-family". You can click the little arrow to jump to the style declaration. That's the style you want to overwrite. For example, if we inspect the style of Deflector, you'll see the style is set on the tag:
body {
font-family: Lato, Helvetica, Arial, sans-serif;
...
}
In your theme, you'd write:
body {
font-family: 'Open Sans', sans-serif;
...
}