Pretty Theme Navigation Font

[PrintsCharming]

Hello there! I'm using the Pretty Theme for a site I'm creating and cannot figure out which code to replace to have the primary navigation fonts changed to this pretty script google font my client would like. I've tried all <h> tags really though 1 might work but it's not. If anyone might be able to put me in the right direction that would be great! Thank you!!

[David Chu]

Hi!
I'm always posting code here for CSS fixes and such, but the answer to this is unpostable on this forum, if that's a word. That's because this forum cannot tolerate an import statement. 🙂 I can tell you by concepts....

I would suggest taking a look at your style.css. Appearance.... Editor, and you should be seeing style.css. If you scroll down a bit, you'll see an area for "import fonts", and apparently the stock font is "Dancing Script", based on the demo. You may be able to duplicate this line, and then edit it to use the other Google font. Then, in turn, you can proceed to your H1 tags or whatever you'd like to use this font for, and specify your new font.

For more info on the nomenclature and code for your font, you can look it up at Google fonts.

I hope that gets you started.
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[ryandonsullivan]

The nav doesn't use any header tags. You'll want take a look at line 425 in your style.css file.

It looks like this

<code>

#nav li a {
display: block;
font-size: 14px;
margin: 0 5px 0 0;
padding: 7px 13px 7px;
position: relative;
text-decoration: none;
}

</code>

But you'll want to declare your new font (after using @import at the top of the same file. See this tutorial for more info on that) with an extra line there. Like this:

<code>

#nav li a {
font-family:  "Google Font Name", Arial, sans-serif;
display: block;
font-size: 14px;
 margin: 0 5px 0 0;
    padding: 7px 13px 7px;
    position: relative;
    text-decoration: none;
}

</code>

Also see this great tutorial from @cdils about using firebug to troubleshoot these types of things: http://www.carriedils.com/firebug-demo-troubleshoot-css/

[PrintsCharming]

Hi there, yes I've taken a break from this site, but need to get this finished. I had added the "Google Font name" into the #nav li a{ , before you suggested it (feeling pretty smart about that option) but it still didn't work. Any other suggestions?

[ryandonsullivan]

Did you import the font as directed in the tutorial I linked to above? This tutorial

Look specifically at the section that says "How to implement Google Web Fonts"

[PrintsCharming]

Hey there! Yes, I did and they are working correctly in Body Text, H1, & H2 tags, but can't get H3, H4, H5 or secondary navigation to update. Go figure...

[ryandonsullivan]

Can you send a link to the site? You may have conflicting CSS somewhere.

[PrintsCharming]

Sure, and thank you so much for taking the time to help me!!!

http://www.CreationsByMonique.com

[ryandonsullivan]

Hmmm... I'm just getting a landing page for ads. Is your site down?

[PrintsCharming]

Yeah.... that's because I posted wrong... It's http://www.CreationsByMonique.net. Sorry!

[Author]

Posts