Implementing Google Fonts

[mborger]

Hello. I could use some assistance implementing some CSS (AgentPress 2). I want to change the fonts used for h1, h2, titles and such. I read both http://www.briangardner.com/google-font-combinations/ for ideas and http://www.studiopress.com/tips/google-web-fonts.htm but I get stuck on the implementation of the last step b/c I'm not a pro on the CSS syntax.

Let's say I want to change the font of the h1 to Lato and the bodytext to Helvetica Neue. I have the @import line in the style.css but I've tried unsuccessfully to attach fonts to the h1 and body sections.

Can someone help, please? Thank you...

[wpspeak]

Can you provide a link to your website? I can tell exactly where to put it if your give me the link.

---

WP Speak | Help the Awesome #Genesiswp Community

[mborger]

bigrockinvestments.com

I see 'h1' 4 times in the style.css, sometimes just as a line item by itself without anything after it. I just don't know what purpose that serves when "h1" is the only text in the line, and how to use it to change the font assigned to the tag.

Thank you.

[mborger]

Or perhaps I'm thinking of it the wrong way. Instead of having to change the font for each of the H tags individually, maybe I need to make a more global modification somewhere that assigns one font for all the headings throughout the site and assigns another font for regular body text.

I really don't know, but the more I've been reading on my own, the more I'm beginning to think that the H tags are by default JUST about font SIZE..... ?

[Bill Murray]

There's no "by default" with respect to CSS, if you mean that outside the context of your child theme stylesheet.

To use Helvetica Neue as your body font, you'd make a change around line 174 of your child theme stylesheet.

Basically, your body font applies to your H1 etc tags until you change that, near line 2390 and 2410. In that sense, unless you change your body font, it applies to a wide range of things.

Widgets, such as those on your home page, are different cases, because they'll often over-ride the heading styles. For example, see near lines 2440 and 2494. If you want all of a certain heading to use the same font, everywhere, no matter where it's used, you'll have to search for all instances of that heading tag other than in the body declaration and change it in each of those instances. If you want a separate font for 1 heading type but not for others, that heading might need its own declaration separate from other heading styles.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[wpspeak]

Well, looks for the word "font-family"

For example (this is for H1 tag)


/* Defaults */

h1 {
font-family: 'Lato', serif;
}

For Title:

#title {
font-family: 'Oswald', arial, serif;
font-size: 48px;
line-height: 48px;
margin: 0 0 5px;
text-transform: uppercase;

}

You just need to search for font-family to change the font of the H1, H2, Title etc. If there's no font-family property, you can add your own.

Cool?

---

WP Speak | Help the Awesome #Genesiswp Community

[mborger]

Ok thanks. I think I get it now. I guess, in a nutshell, it'd be easier to say that I want to match the typography chosen in genesisframework.com onto my site bigrockinvestments.com . I just love the look -- it's so easy on the eyes. I want to make my posts and pages easier to read to hopefully encourage more user engagement.

So does this mean that I need to look up each individual h tag (1, 2, 3, etc), title tag, body tag, etc in the css with Firebug on that site and match it in my own? This is where I start to trip over myself.

 

[mborger]

Or is there a place to change all the h and title fonts to be one font and the body text to be another?

[ellegaarddk]

If you're redefining the CSS, then yes.

This will set the font for all H's:
h1, h2, h3, h4, h5 {font-family: "My Fonttype"}

But you have make sure, that it's not defined somewhere further down the stylesheet. So you must delete any separate defined font-family for H1 or H2.

---

Morten Ellegaard Larsen – Designer and solution finder, ellegaard ID | Noerresundby, Denmark

“I ain’t no expert, I just know more…”

[Author]

Posts