Home>Support>Font Size and Color Change

Font Size and Color Change

By chemdata, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I was trying to change the color and font size of the pages. Your documentation stated “Select the font style, size and color by navigating to Fonts.” However, I could not locate the Fonts part after Appearance > Customize >.

I then added the following to the style.css file in my vantage-child theme with no luck also.

/* Consistent fonts across all elements */
body,button,input,select,textarea{
color:#ff0000;
font-family:Arial;
font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height:1.5em;
font-size:18px;
word-wrap:break-word;
}

What do you advise. Thanks.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi

    The expanded Customizer options discussed in the documentation are a part of Vantage Premium. You can upgrade for as little as $5. To view the offering head to Appearance > Premium Upgrade.

    If you’d like to stick to Vantage Free here are the selectors you can target:

    /* Body */
    
    body,button,input,select,textarea {
    	font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif !important;
    }
    
    /* Site Title Font */
    
    header#masthead h1 { 
    	font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif !important;
    }
    
    /* Heading Font */
    
    h1,h2,h3,h4,h5,h6 { 
    	font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif !important;
    }
  2. 10 years, 10 months ago chemdata

    Thanks. I added the suggested code to the vantage-child style.css file as follows:

    /* Body */
    
    body,button,input,select,textarea {
    	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    	color:#000ff;
    	font-size:13px;
    }
    
    /* Site Title Font */
    
    header#masthead h1 { 
    	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    	color:#0000ff;
    	font-size:13px;
    }
    
    /* Heading Font */
    
    h1,h2,h3,h4,h5,h6 { 
    	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    	color:#0000ff;
    	font-size:13px;
    }

    However the only one that changed font color was header#masthead h1. The other two kept the font color as it was.

  3. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Try using !important for the color and font-size properties too.

  4. 10 years, 10 months ago chemdata

    Andrew thanks again. Adding the !important corrected the problem.

  5. 10 years, 10 months ago chemdata

    I guess I spoke to soon. It corrected the font size problem but not the color as the text in the body of the page did not change.

  6. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Please send through a link and I’ll take a look.

  7. 10 years, 10 months ago chemdata

    Here is link to test site:
    http://deadplanetpublishing.com/vantage/

  8. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Add this, should resolve:

    .entry-content {
    color: #666666 !important;
    }
  9. 10 years, 10 months ago chemdata

    Andrew you nailed it. That did the trick. Thank you very much!!!

  10. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad that helped.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More