Pretty Theme Navigation Font

Community Forums Forums Design Tips and Tricks Pretty Theme Navigation Font

This topic is: not resolved

This topic contains 9 replies, has 3 voices, and was last updated by  PrintsCharming 1 year, 6 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #34614

    PrintsCharming
    Participant
    Post count: 26

    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!!

    #34629

    David Chu
    Participant
    Post count: 1374

    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

    #34632

    ryandonsullivan
    Participant
    Post count: 11

    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/

    #35740

    PrintsCharming
    Participant
    Post count: 26

    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?

    #35772

    ryandonsullivan
    Participant
    Post count: 11

    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”

    #35774

    PrintsCharming
    Participant
    Post count: 26

    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…

    #35775

    ryandonsullivan
    Participant
    Post count: 11

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

    #35780

    PrintsCharming
    Participant
    Post count: 26

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

    http://www.CreationsByMonique.com

    #35783

    ryandonsullivan
    Participant
    Post count: 11

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

    #35788

    PrintsCharming
    Participant
    Post count: 26

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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.