The ability to choose fonts and sizes for headers and body is included in WordPress.com, but not WordPress core.
If you’d like to add a new font on a self-hosted site where you’re running WordPress on your own hosting, the simplest way to do it is with a Google Font plugin.
You’d then add some custom CSS to target the specific elements you’d like to change, which is something we could help with if you have trouble using a browser inspector to find the correct elements.
As you can now see on my website, downloading and activating the Google Fonts plugin has erased all memory of what my body font is supposed to look like. Even when I select a different font for the body, it remains this ugly font that it is now. Any ideas why?
I’ve since deactivated Google Fonts.
I don’t know why that would have happened, but if the plugin isn’t working as you expect, you can either try another, or post in the plugin’s support forum. Perhaps it was adding some custom CSS by default that would need to be overridden. Without seeing it in action I can’t diagnose what might have happened.
-
This reply was modified 9 years, 3 months ago by
Kathryn Presner. Reason: fixed typo
If reactivating Google Fonts will help, please let me know.
This is a screenshot of what I’m currently seeing. This is a screenshot of what my website looked like before I downloaded Google Fonts. As you can see, there’s a big difference here, and this difference happened literally as soon as I activated Google Fonts. Even after deactivating it, this issue has not gone away.
Update: Downloading the Google Fonts plugin simultaneously downloaded a plugin called Fonts Add. After deactivating Fonts Add, my website is back to normal. However, my header fonts still look a little funny (the size and spacing is different).
Are there any other plugins you can recommend for changing fonts?
However, my header fonts still look a little funny (the size and spacing is different).
That can be tweaked with custom CSS – as I mentioned earlier, adding custom fonts is a two-part process: the plugin to enqueue the font in the theme, and custom CSS to apply the fonts to specific elements and get them looking exactly how you want.
If you can link me to a specific post or page where the headings need adjustment and tell me how you’d like to tweak them (make them a bit bigger or smaller, or tighten the letterspacing, etc.) I can help with the necessary code.
Hmm, your screenshot looks like a different font than what you have now applied to your page titles.
Your current h1 page title font is Open Sans Condensed Did you add that font with the plugin? Do you know what font you were using before — the heading font that shows in your screenshot?
Very strange. I did not change that font, so I’m not sure why it changed itself. It was originally Lato.
Try adding this to your custom CSS to return h1 tags to Lato:
h1 {
font-family: Lato, Helvetica, Arial, sans-serif;
}
Looks like this when I use my browser inspector:
That worked! Thank you. Now, can we change all of the headings (not just H1) with that same CSS? As you’ll see on that same page, a little further down, H3 doesn’t look right.
Also, I’m back to figuring out how to change the body font without messing everything up. Haha!
Add all the other heading sizes to the CSS I gave you above:
h1, h2, h3, h4, h5, h6 {
font-family: Lato, Helvetica, Arial, sans-serif;
}
Try using a browser inspector to target any other elements whose font you’d like to change. Here are some guides:
https://dailypost.wordpress.com/2013/07/25/css-selectors/
http://dailypost.wordpress.com/2013/06/21/css-intro/
http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
https://thewc.co/articles/view/web-inspector-tutorial
Also, Iām back to figuring out how to change the body font without messing everything up
What font do you want it to be?
I’d love to use Baskerville for the body font (or something really similar). Thank you!
Well, now we’re back where we started — how did we get here? š
As I mentioned at the beginning, to bring in a new font, the easiest way is to use a plugin like a Google Font plugin. But Baskerville isn’t a Google Font.
If you find a Google Font you like – https://fonts.google.com/ – you would use a Google Fonts plugin to bring your selected font into your site (“enqueue it”), following the instructions in your plugin. (If you need help with that part of the process, the best place to post is in the plugin’s forum.)
Once your font is enqueued, I could assist you with the code needed to apply the font to the various elements on your site.
For example, this is the most basic CSS:
body {
font-family: yourfont, backupfont1, backupfonr2, serif;
}
You may also need more specific CSS to target elements that override the body tag in Pictorico, but we can deal with that once you’ve chose your font and enqueued it in your site through a plugin.
Let me know how it goes!
I’m very wary of using Google Fonts now, given the issue I had earlier with it (see above for information regarding issue). Basically, Google Fonts did this. Is there any other font plugin you can recommend? The Google Font plugin totally messed up my site. :/
