Bromley Theme: CSS Change text style on a single post

  • Unknown's avatar

    Hi there
    I am kind of amazed that you are unable to change the font size etc on WP. I assumed it would be there like Word as its kind of essential right?

    Any simple directions on how to change font style before I post would be awesome. I don’t mean go to customize and change the font style throughout every post, just some headers I need doing on single posts.

    Thanks for your help

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

  • Unknown's avatar

    BTW: Bromley doesnt have any plug-ins from what I can see!

  • Unknown's avatar

    Hi there,
    You should be able to change your fonts for headings and the font base from WP Admin>Appearance > Customize > Fonts. Just click on the current font name and you’ll see a drop down of all available fonts.

  • Unknown's avatar

    @andysmart6866, are you talking about for setting font sizes for headings or such within pages or posts, such as for headings in your pages and posts?

  • Unknown's avatar

    Hiya there > Cheers for dropping by
    1: I don’t mean go to customize and change the font style throughout every post
    2: The sacredpath: Good question: I was vague as vague could be there. I was wrong by using the word headers.

    I mean to just change the font size in single posts. These would be different from the header text. I know you can set the font style generally on Customize but when you do that it changes everything.

    Thanks for dropping by :)

  • Unknown's avatar

    If you’re being post specific, I would just make a span tag with a style section and define the font there. For example:

    <span style=”font-family:consolas;font-size:small;”>Put your post text in here.</span>

    Someone else might have a better way, this was just a hip-shot.

  • Unknown's avatar

    Thanks for that mhayden7
    Where do I add it? Its like algebra to me :(
    Here’s an example of text I would like to change

    <span style=”color: #000000;”>Use of the WKTG

    How do I change that for ariel say, or Times New Roman, Georgia or Garamond?

    Thanks for your help

  • Unknown's avatar

    To change that h1 text to serif style font, add the font family declaration to the style in the span like this.
    <h1 style="text-align: center;"><span style="color: #000000; font-family: "Times New Roman", Georgia, serif;">Use of the WKTG</span></h1>

    There is an alternate way of doing this though where it would be easier on you. What we can do is to define a class with the styling you want in the custom CSS and then all you have to do would be to call out the class. The beauty of this would be that you could use the same class for other types of headings as well (h2, h3, etc.) if you wished.

    First off you would go to Customize > CSS and paste in the following custom CSS.

    .my-heading {
    color: #000000;
    font-family: "Times New Roman", Georgia, serif;
    text-align: center;
    }

    Then in the Text tab in your editor, you would do this.
    <h1 class="my-heading">Use of the WKTG</h1>

    Anytime you wanted that styling, all you would have to do would be to put in that class declaration in the h1, etc., tag.

    One thing I will mention is that h1 is typically used for site titles and page/post titles and generally not in the content body. h2, h3, etc., is better in the body. What you can do is to create your own style and then apply it to whatever text you wish by just declaring the CSS class, similar to what we have done above.

  • Unknown's avatar

    If you wish to create your own CSS class that mimics the styling of h1, let me know and I would be more than happy to help with that.

  • Unknown's avatar

    Hi there sacredpath >
    Looks great though I’m a bit confused: In that there are three font styles in the same sentence:
    “Times New Roman”, Georgia, serif
    Can you clarify that for me.

    Cheers SP :)

  • Unknown's avatar

    With fonts, it is always a good idea to specify more than one just in case the visitor’s computer doesn’t have the font. The browser will try to use the first font, and if it is not found, then it will try the second. The last one, serif, is the browser standard font and will generally always be available.

    Another reason for specifying multiple fonts is that it gives you more control over how things look.

  • Unknown's avatar

    God that’s useful. I’ll check it out when I get home. Thanks mate. I’ll keep you posted!

  • Unknown's avatar
  • The topic ‘Bromley Theme: CSS Change text style on a single post’ is closed to new replies.