override a custom font

  • Unknown's avatar

    Hello!

    For some reason I can’t seem to modify the entry-content font and its size. The custom-tab only allows the size up to (3), which in some cases, is just not enough for a decent readability.

    When I change the CSS font-size nothing happens. In fact, the text just moves a little bit. I’ve tried to add !important but to no avail.

    In the past I remember changing the body-text size but something happened and I can’t do it anymore. It’s quite frustrating…

    Sorry for the basic question, I’ve read people having the same problem elsewhere. It’s just that I can’t find the problem in the CSS by myself…

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    What font are you wanting to use and what is the CSS that you are adding through the Customizer?

  • Unknown's avatar

    I have already tried all the followings:

    body.single .site-content {
    width: 70%;
    font-size: 40px;
    }

    .entry-content {
    font-size: 40px;
    text-align: justify;
    }

    .body.single .entry-content {
    font-size: 40px;

    }

    #content .body.single .entry-content {
    font-size: 40px;

    At this position, unable to see any modifications live, I can’t really tell which font I’d use. But let’s say Arial. I also don’t want that size, it was just a test. It seems like my CSS in this regard has stopped working :(

  • Unknown's avatar

    Add this and increase the value:

    .entry-content p, .entry-content li, .entry-content dd, .entry-content dt, .entry-content pre, .entry-content address, .entry-content div, .entry-content kbd, .entry-content tt, .entry-content var {
    font-size: 1.2rem;
    }
  • Unknown's avatar

    You once again my friend! Thanks a lot. That actually worked, it’s perfect. I still have to learn how to do it by myself. Sometimes I can make small changes but big codes like this one are still beyond my understanding. If you can help me with another thing I’d appreciate! :)

    Now that I’ve increased the font-size, can I apply it only to the post’s content? As it is now, all the entry.contents are larger. It would look nicer if the paragraphs nearby the thumbnails in the front-page, and in the categories archives, could remain in a different size from the actual post. I mean, smaller.

    Is that possible?

    Thanks!

  • Unknown's avatar

    You’re welcome.

    To learn how to do this yourself, you need to learn how to inspect your page using the Inspect Element option of your browser or a developer extension (such as Firebug in Firefox or Web Inspector in Safari).

    To override my suggestion on all dynamic pages (front page, category pages, monthly archives etc), add this:

    .home .entry-content p, .archive .entry-content p {
    font-size: 1.2rem;
    }

    By the way, this complication is due to a bad choice on Sight: since dynamic pages display post excerpts instead of full posts, they shouldn’t have the same selector for the post content.

  • Unknown's avatar

    That’s how I’ve been working so far. It’s still quite confusing but every time I change something it gets a little more clear. I almost got it right on this one. Only the .home /.archive were missing hehe

    Do you know if the Sight Theme allows us to select what we want on these excerpts, or at least set a standard size for that matter? It’s not consistent at all…

  • Unknown's avatar

    Sorry, I don’t understand your question. Rephrase please!

  • Unknown's avatar

    Sorry about that. I was talking about the text excerpts. In the homepage, for instance, the first post presentation consists of 9 lines (190px). The second one 8 lines (168px). It’s not a big difference, but this variation sometimes results in a post’s entry being longer than the thumbnail pictures. Since I’ve decreased the font size, this is not a problem anymore. But before I did that, in some texts the “read more” was underneath the picture. It looked really weird. Also, it’d be good to not have a random-sized text. Without having a standard size, it’s impossible to tell when the excerpt will stop and the “read more” appear…

  • Unknown's avatar

    First of all, the height varies because auto excerpts display a fixed number of words (so the total height depends on whether there are more longer or shorter words). If you don’t like the result, you can replace auto excerpts with your own custom excerpts, by entering content in the Excerpt module of the post editor.

    Second, browsers don’t all display the text in exactly the same way, so things aren’t as consistent as you think. Here’s part of your homepage as it shows in my Firefox:
    http://wpbtips.files.wordpress.com/2013/12/revistausinafirefox.png
    And here’s the same part as it shows in my Safari:
    http://wpbtips.files.wordpress.com/2013/12/revistausinasafari.png

    Third, the theme is responsive: it shrinks to adapt to lower screen resolutions and mobile devices, so on narrower screens the excerpts will become longer anyway. Drag your browser window to make it narrower and see for yourself.

  • Unknown's avatar

    I see… that’s what I was looking for, the custom excerpt. I hadn’t heard about it before. Thanks a lot for your time and all the great advices. It has really helped me :-)

  • Unknown's avatar

    You’re welcome!
    If you don’t see the Excerpt module when you edit a post, click Screen Options (top right) to activate it.

  • The topic ‘override a custom font’ is closed to new replies.