Community Forums › Forums › Archived Forums › Design Tips and Tricks › Pretty Theme Navigation Font
Tagged: fonts, google fonts, help, Pretty Theme, primary navigation
- This topic has 9 replies, 3 voices, and was last updated 11 years ago by PrintsCharming.
-
AuthorPosts
-
April 10, 2013 at 2:22 pm #34614PrintsCharmingMember
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!!
April 10, 2013 at 3:32 pm #34629David ChuParticipantHi!
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
April 10, 2013 at 3:35 pm #34632ryandonsullivanMemberThe 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/
April 16, 2013 at 8:05 am #35740PrintsCharmingMemberHi 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?
April 16, 2013 at 11:14 am #35772ryandonsullivanMemberDid 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"
April 16, 2013 at 11:16 am #35774PrintsCharmingMemberHey 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...
April 16, 2013 at 11:21 am #35775ryandonsullivanMemberCan you send a link to the site? You may have conflicting CSS somewhere.
April 16, 2013 at 11:25 am #35780PrintsCharmingMemberSure, and thank you so much for taking the time to help me!!!
April 16, 2013 at 11:30 am #35783ryandonsullivanMemberHmmm... I'm just getting a landing page for ads. Is your site down?
April 16, 2013 at 11:57 am #35788PrintsCharmingMemberYeah.... that's because I posted wrong... It's http://www.CreationsByMonique.net. Sorry!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.