I don’t see Lato being enqueued in your site. If the font isn’t enqueued first, then you can’t use it in the CSS.
Try using a Google Fonts plugin to enqueue the font in addition to targeting the CSS.
Also, the class header-font doesn’t exist, I’m curious where you got that. 🙂
This should do the trick once Lato is correctly enqueued:
.entry-header .entry-title {
font-family: Lato, Helvetica, sans-serif;
}
Be sure to include at least one fallback font and one generic fallback font family, in case the main font isn’t available – for example, if the Google font server is down or doesn’t load.
I used a browser inspector to find the right element to target.
If I want to use the “light” version of Lato, how would I do that?
You would need to enqueue the Light version of Lato after installing a Google Font plugin. The plugin’s instructions should tell you how to do that.
Yes, I’ve done that, but how do I incorporate that into CSS? I assume the light version will need some kind of decoration assignment?
You can modify the font-weight property to match the variant you’re using:
https://www.google.com/fonts#UsePlace:use/Collection:Lato
For example, Lato Light would be equivalent to font-weight: 300;
Keep in mind that you’re still declaring Tahoma for several elements in your custom CSS, for example:
.content-area .entry-title a {
font-family: Tahoma,Geneva,sans-serif;
font-size: 20px;
}
.single-post .entry-title {
color: #ffffff;
font-family: Tahoma,Geneva,sans-serif;
font-size: 50px;
}
Since these are lower down in your custom CSS, they are overriding your earlier Lato declarations.
