Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 21, 2017 at 6:34 pm #781341
    cloeffler

    I’ve now worked on this issue for 2 solid days, and it’s time to bring in the pros to help! I love Enfold, and know there must be a way to solve my font issues, but the more I mess with it, the bigger my problems are getting.

    1. I want to use Amatic SC google font at my H1 header font ONLY. I don’t care if it is a special header, or a default H1. Just one that I can rely on. I seem to get it to work for a few clicks of the browser, and then it doesn’t any more.

    I do have the Amatic SC loaded as you specify in my functions.php of my child theme. It looks like this:
    add_filter( ‘avf_google_heading_font’, ‘avia_add_heading_font’);
    function avia_add_heading_font($fonts)
    {
    $fonts[‘Amatic SC’] = ‘Amatic SC:300,700’;
    return $fonts;
    }

    add_filter( ‘avf_google_content_font’, ‘avia_add_content_font’);
    function avia_add_content_font($fonts)
    {
    $fonts[‘Amatic SC’] = ‘Amatic SC:300,700’;
    return $fonts;
    }

    With that, I’m able to add Amatic SC to my header font google list, but I don’t want to use it for all 6 headers. Only H1. Actually I need this H1 font also to be centered. So I thought I would change the special heading css to make that work, but it doesn’t.

    What I tried was this:

    #top #wrap_all .all_colors h1 {
    font-family: “Amatic SC”,”Helvetica Neue”,Helvetica,Arial,sans-serif;
    font-size: 60px;
    font-weight: bold;
    text-align:center;
    text-transform: uppercase;
    }

    .av-special-heading h1, .av-special-heading h2,
    text-align:center;

    }
    My guess is that I’ve messed up my settings and css as I’ve gone along.

    I say this because I also tried to overlap my logo on top of my header, and the following css did not work:
    .logo, .logo a {
    overflow: visible;
    }

    .logo img {
    max-height: 150px !important;
    }

    What am I goofing up?? Can you help, please??

    April 22, 2017 at 7:04 am #781562
    Rikard

    Hey Christine,

    Thanks for the login details. I can see the font you have added in the fonts list, it gets added at the very bottom. If you want that to apply for all your H1 tags then you can go to Enfold->Advanced Styling and add it there, could you try that out please?

    Best regards,
    Rikard

    April 22, 2017 at 5:54 pm #781723
    cloeffler

    Hey Rikard!
    Yes, I have done that, and so far, it appears to be “holding consistently”… With that fixed, could you please explain why I can’t get the logo to overlap the header???

    thanks again for your quick reply!!

    April 23, 2017 at 5:31 am #781877
    Rikard

    Hi,

    Thanks for the feedback. I’m not sure exactly what you are looking to achieve with the logo, could you post a screenshot highlighting the changes you would like to make please?

    Best regards,
    Rikard

    April 23, 2017 at 8:17 pm #782033
    cloeffler

    Hi Rikard!
    Thanks for getting back with me. I’d like the header to have an overlapping logo, like this mockup I made:
    header with overlapping logo

    thanks for you help!

    April 24, 2017 at 5:21 am #782137
    Rikard

    Hi,

    Thanks for the feedback. Please try the following in Quick CSS under Enfold->General Styling:

    strong.logo {
    position: absolute;
    top: 20px;
}

    Best regards,
    Rikard

    April 24, 2017 at 12:48 pm #782267
    cloeffler

    HI Rikard,
    Thanks for the suggestion. Unfortunately, it moved the entire logo down 20px. I want the top of the logo to remain at 0px but to have the bottom of the logo overlapping the yellow line, which is the lower border of the header.
    This is what the new css created:
    http://hot26tt.com/wp-content/uploads/Screen-Shot-2017-04-24-at-6.45.06-AM.jpg
    Any suggestions??

    April 25, 2017 at 6:24 am #782657
    Rikard

    Hi,

    Ok, thanks for the feedback. Please try this instead:

    
strong.logo {
    position: absolute;
    top: 0;
    height: 100px;
    width: 300px;
}

    You might need to play around with the values a bit to get it looking the way you want.

    Best regards,
    Rikard

    April 25, 2017 at 1:13 pm #782852
    cloeffler

    Good morning (or afternoon where you are!)
    Still not working! Nothing moves at all when I try that. I’ve flushed the cache several times…

    I also tried this and it did not work:

    .logo, .logo a{
    position: absolute;
    top: 0;
    height: 83px;
    width: 150;
    }
    It remains in the same place it has been in the images I’ve sent you.

    April 26, 2017 at 6:36 am #783251
    Rikard

    Hi,

    You still have the CSS I previously sent active:

    strong.logo {
    position: absolute;
    top: 20px;
}

    Remove that and replace with this:

    strong.logo {
    position: absolute;
    top: 0;
    height: 100px;
    width: 300px;
}

    I just checked it and it works.

    Best regards,
    Rikard

    April 26, 2017 at 1:05 pm #783443
    cloeffler

    Yeah! It is working now! Thank you!

    So… the BIG mistake I was making is that I was trying to make the changes in the css editor. It did not work there, ever after removing the old css from the quick css. Any reason why??

    April 26, 2017 at 5:46 pm #783630
    Yigit

    Hi,

    That must be caching related. Please make sure to flush cache and refresh your page a few times after making changes on your site :)
    Glad Rikard could help!
    Let us know if you have any other questions or issues!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Can't get my custom google font Amatic SC to work in the right places!’ is closed to new replies.