Support » Fixing WordPress » How to change theme stylesheet to use system font stack

  • Resolved xwrecon

    (@xwrecon)


    New to WordPress and need some help. I have the Atmosphere Pro theme and want to use the system font stack. Looking at the stylesheet I see:

    /* Typographical Elements
    --------------------------------------------- */
    
    html {
    	font-size: 62.5%; /* 10px browser default */
    }
    
    /* Chrome fix */
    body > div {
    	font-size: 2rem;
    }
    
    body {
    	background-color: #eee;
    	color: #333;
    	font-family: 'Lato', sans-serif;
    	font-size: 20px;
    	font-size: 2rem;
    	font-weight: 300;
    	line-height: 1.625;
    	margin: 0;
    }
    
    a,
    button,
    input:focus,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    textarea:focus,
    .button,
    .gallery img {
    	-webkit-transition: all 0.1s ease-in-out;
    	-moz-transition:    all 0.1s ease-in-out;
    	-ms-transition:     all 0.1s ease-in-out;
    	-o-transition:      all 0.1s ease-in-out;
    	transition:         all 0.1s ease-in-out;
    }
    

    I read on https://makefastsites.com that I can change it to the system font stack by using this code:

    body { font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif; }

    My question is do I just replace the “font-family” line and keep everything else in the “body” section? Or do I remove the other code in the “body” section and only leave the new “font-family” code line.

    Hope that makes sense, your assistance is apprecited!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Yes, only replace the font-family portion.

    Also, don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

    It’s safer to just add the block you put up there to the Custom CSS portion of Appearance > Customize in your site’s Dashboard.

    As alternatives, you could create a child theme.

    James,

    Atmosphere Pro is a child theme on the Genesis framework so that is covered against being overwritten like you recommended.

    A couple questions and thanks again for helping out a newbie!

    When you say block I am not sure what you mean but here is what I think you meant.

    Insert this code block into Appearance> Customize> Additional CSS in the Site Dashboard:
    Code Block #1
    body { font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif; }

    But what about the other code between Body {} in the stylesheet, shouldn’t I create the code block like this instead:
    Code Block #2

    body {
    	background-color: #eee;
    	color: #333;
    	font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
    	font-size: 20px;
    	font-size: 2rem;
    	font-weight: 300;
    	line-height: 1.625;
    	margin: 0;

    Does this “Additional CSS” field just add the code to the stylesheet or do some sort of a search and replace on the stylesheet code? If it just adds the code how does t take precedence over the previous code.

    Your reply is appreciated!

    Jeff,

    So I now understand that “additional CSS” adds not does a “search and replace” so please disregard the last part of my request for help on the previous post. My bad!

    http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Yep, what I meant was just add this to Additional CSS:

    body { font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif; }

    That will override the body’s existing font-family.

    Thanks James!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to change theme stylesheet to use system font stack’ is closed to new replies.