Add Google Fonts with Jetpack Custom CSS
Here’s an easy way to add Google Fonts to WordPress without the stress of touching your theme’s CSS files. If you have the Jetpack by WordPress.com plugin installed on your blog, simply install the plugin, activate it and go to the “Jetpack” tab in your dashboard menu on the left. Click on “Settings”. If you don’t have the plugin yet, you can search it in your plugins dashboard.
RELATED: How to Add a Pinterest Pin Button to Your Images
Once the Jetpack plugin has been installed, you should see a new option under your dashboard menu. Click “Appearance” → “Edit CSS” to access your the Jetpack CSS Stylesheet Editor. This stylesheet will allow you to add custom css overtop of your theme’s current css stylesheet.
This way, you won’t have to edit your theme’s stylesheet or risk causing errors to the code. You’ll also notice that all of your previous revisions will be saved so you can easily revert your design if you make a mistake.
Once you’ve added your @import fonts, you’ll also need to integrate your new fonts into your css stylesheet. You can do this by adding the font-family, font-weight and other information to your css stylesheet. Typically, you’ll need to change your body font and headings, although there may be other sections of fonts you’ll want to customize as well.
Hover on the codes below and click “view source” to grab the code.
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.8rem;
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
line-height: 1.2;
}
You can hit CTRL + F on your keyboard to open a pop-up search for in your browser. This will allow you to search your css file for the correct text. Look for the following terms: “body” and “h1”. If you are interested in changing more of your theme’s fonts, you can also search “font-family” and replace all the font settings throughout the file.
When in doubt, you can always right click on the text on your blog and select “inspect element” to see the exact string of css that needs changing.
Next, just add them to your Jetpack CSS stylesheet and customize as needed for the font family, font weight, font size and line height. You can even add a custom color by inserting “color: #06A4B8”. Just use the hex or RGB code that you prefer.
And that’s it.
