OK. If you’ve got Google Chrome, please use it now. Log into your blog admin in one tab, and get the public blog in another.
(Not to badmouth other browsers, but I find Google Chrome is very intuitive in CSS troubleshooting.)
Position your pointer over some element you’d like changed, and right-click the mouse. It gives you a little menu. Choose Inspect Element
.
(Follow along by doing this for your post headline, [Giveaway] The Ultimate Google Nexus 7 Accessory Pack)
A large window now shows up at the bottom of the screen. The left side shows the HTML element you were pointing at (probably the anchor tag for the title).
The right side shows the CSS associated with that element and related elements. If you scroll down the CSS section, you’ll notice a font-related rule:
.post-loop h2 {
font-family: ProcionoRegular,Georgia,serif;
font-weight: normal;
font-size: 1.2em;
}
Now you know the class to target (.post-loop h2
).
Go back to your dashboard and click Settings > Google Fonts
.
If, for example, you want this to be Roboto Condensed
, click on Show Options
beside this font. Now go to 3. Custom CSS (Optional)
and type:
.post-loop h2 {
font-family: "Roboto Condensed", sans-serif;
}
Click Save All Fonts
, and all your post headings should now be changed to Roboto Condensed
. (You can verify that by refreshing your public blog page.)
Repeat for any other elements you want to change.