Change H1 to Keep Font and Style

  • On the page attached, there is text at the top of the page that reads “Asphalt and Paving Services” in large yellow letters. I would like to make this text my H1 text for SEO purposes, however, when I change the tag to H1, the text changes style and looks bad. I didn’t originally create this site, but I did try adding some custom CSS in the following format to the page to try and keep the font the same, but to no avail.

    h1	{
color: #fff200;
font-family: "Titillium Web";
font-size: 60px;
font-weight: 700;
text-align: center;
}

    I apologize as I am new to coding, could it be that the theme H1 style is somehow overriding my custom CSS? It would be fantastic if there was some way to assign the H1 tag to the text while having it keep its original style, but I have no idea if that is possible. Any help with this is very much appreciated. Thank you!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Right now, the rule that is currently in effect for that heading is this:

    
#fancy-title-3 {
    letter-spacing: 0px;
    text-transform: none;
    font-size: 60px;
    color: #fff200;
    text-align: center;
    font-style: inherit;
    font-weight: 700;
    padding-top: 16px;
    padding-bottom: 0;
}

    It looks like this rule includes the four property values that you’ve specified in what you’ve tried adding for h1, so did you add this rule, too? I see that the title is still h2, though, and not h1.

    Thread Starter justahumblewpuser

    (@justahumblewpuser)

    @crouchingbruin

    Thank you very much for your help! I changed the title back to H2 to keep the look the same. Should I just try adding “important!” to my code as follows?

    h1 {
    letter-spacing: 0px !important;
    text-transform: none !important;
    font-size: 60px !important;
    color: #fff200 !important;
    text-align: center !important;
    font-style: inherit !important;
    font-weight: 700 !important;
    padding-top: 16px !important;
    padding-bottom: 0 !important;
}
    Thread Starter justahumblewpuser

    (@justahumblewpuser)

    It seems to do the trick, but I have heard to avoid using !important

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change H1 to Keep Font and Style’ is closed to new replies.