Not Recognizing Font Change

  • Hey all,

    I am trying to change the font on my theme (custom). Whenever I change the font type (Times New Roman to Arial, for example), it works, but the size change is never recognized.

    Here is what I want my font to be:

    body {
    font: 88%/1.28em Georgia, serif;
}

    Does anybody know why my theme never recognizes the sign change (it doesn’t work if it’s %, px or pt.)? Is there somewhere else on the style sheet that I need to change?

    Any help would be appreciated.

Viewing 15 replies - 1 through 15 (of 26 total)
  • Thread Starter thegameison

    (@thegameison)

    Here is a site that uses the exact font I want:

    https://contrarianfanatics.com

    Thread Starter thegameison

    (@thegameison)

    Added code to first post.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Apply font changes to text elements rather than the body, such as paragraphs, hyperlinks, headings etc.

    Thread Starter thegameison

    (@thegameison)

    Not sure I understand you. We are talking about CSS changes.

    please post a link to your site.

    as in your example site, individual elements might be formatted with their own individual fonts, in which case a general font declaration in the body style might not work.

    search style.css (and possible other stylesheets) of your theme for font or font-family

    https://www.w3schools.com/css/css_font.asp

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes apply CSS changes to text elements, inline elements, for example,

    /* CSS code */
a,p,h1,h2,h3,h4,h5,h6{
 font-family: yourFont, sans-serif;
}

    Thread Starter thegameison

    (@thegameison)

    Here is my site name:

    https://www.thechasedownblock.com/

    Here is the body tag currently have in my css file:

    body{
	font-family:'Arvo', Georgia, "Times New Roman", Times, serif;
	background:url(../images/bg.jpg) fixed repeat;
}

    When I change it to:

    body{
        font: 88%/1.28em Georgia, serif;
	background:url(../images/bg.jpg) fixed repeat;
}

    The font changes but the size is smaller than on the example site.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The font changes but the size is smaller than on the example site.

    What are you looking at? There are many font sizes on the example site and your website.
    What specifically isn’t looking the way you want it?

    Thread Starter thegameison

    (@thegameison)

    I can change the font from Arvo to Georgia on my site but it does not recognize a size change whether I put 12px or 25px. I want my site’s font to be Georgia and the same size as the body text on the example site but my site doesn’t recognize size changes.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That’s because font sizes of the posts’ paragraphs (in your theme) follow a different set of styles in layout.css.

    Just look at 403 layout.css

    div#content_wrap p, li {
color: #333;
line-height: 18px;
font-size: 13px;
margin-bottom: 10px;
}

    Can you now see you cannot apply the font size to the <body> element?

    Thread Starter thegameison

    (@thegameison)

    So if I delete that piece of the code I can change the code in the body element? And that will keep the other parts of the site (Nav bar, post titles, etc) on Arvo?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I think you’re confusing actual HTML elements with the “body” of the post.
    Let’s replace “body” with “posts’ paragraphs”.

    If you want only to replace the “posts’ paragraphs”, you need to make a new style at the bottom of layout.css with

    div#content_wrap p {
 font: 88%/1.28em Georgia, serif;
}

    Thread Starter thegameison

    (@thegameison)

    Excellent Andrew, I really appreciate that. Can you help me with another issue? I am using a plug-in called Site Layout Customizer to build certain pages. It requires adding a customizer.css file. Ever since I did that, it affected the links on my normal pages.

    https://thechasedownblock.com/

    When you hover over the links they are supposed to turn red (they turn blue on my other site here: https://www.thecutoffman.com/). Is there a way I can make it so my customizer.css file doesn’t affect my other css file, that way my post pages aren’t the same as my design page (https://thechasedownblock.com/home/). You can also see on that design page that the captions on the bottom three images disappear when hovered over.

    Your help would be greatly appreciated.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Is there a way I can make it so my customizer.css file doesn’t affect my other css file

    If you want your other stylesheets to take precedence, in the header.php file try moving your other stylesheets near the </head> HTML element.

    Thread Starter thegameison

    (@thegameison)

    This stylesheet isn’t used through the header.php, though, you just stick it in the plug-in and it does the work, so I’m not sure where to do that at.

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘Not Recognizing Font Change’ is closed to new replies.

Tags