How to Change the Title Font in Suffusion Theme

I received a great question from a student therefore thought the answer may assist others. The question asked about the WordPress Suffusion Theme is:

“I want to change the font type and size for my header … (it’s called Georgia).  I thought to get around this I would make a jpeg or pdf with the title written in the preferred font and use this in my blog heading”.

First up, it is always preferable, for SEO reasons, to use text in place of images so we’ll concentrate on achieving the outcome with text rather than an image.

The Suffusion Theme has more options than I have seen on any other Theme however there are still a few items that require a bit of CSS ‘massaging’. Fortunately Suffusion allows for embedded CSS to be included into the Theme options and without having to create a Child Theme.

Here is how to change the Title font in Suffusion:

  1. From the WordPress Dashboard go to ‘Appearance’ then ‘Suffusion Options’
  2. Click ‘Back-end settings’ -> ‘Custom Includes’
  3. In the ‘Custom Styles’ field enter:.blogtitle a {
    font-family:georgia,arial,serif;
    font-size: 150%;
    }
    .description {
    font-family:georgia,arial,serif;
    font-size: 150%;
    padding-top: 20px;
    }
  4. Save the Page

What this CSS is doing is first changing the Site Title (as assigned at ‘Settings’ -> ‘General’ -> ‘Site Title’)  text to Georgia then increasing its size. The Tagline (‘Settings’ -> ‘General’ -> ‘Tagline’) font family and size are then changed and the padding is increased so that the Title and Tagline font don’t overlap.

Just change the CSS to whatever your preference for the Ttile and Tagline and include any other CSS properties and values as necessary.

Comments

  1. says

    Hi Gary,

    Useful post however I seem to be having some styling issues. I’m new to CSS coding. I am simply trying to change the h2 tag for my posts. I am trying this in the override box h1.posttitle{font-size:12px;color:red} but its not working.

    Any ideas?

    Cheers
    Claire

    • says

      Hi Claire,
      You’ll need to enter:
      h2.posttitle {color: red; font-size: 12px;}

      I notice on the comment you left that you had missed the final semi-colon and had entered h1.posttitle rather than h2.posttitle.
      Let me know if you still have problems.

  2. says

    Where could I change the ‘brutal white’ font colour, and eventually the size, for sidebar widget titles? It seems to be acceptable, when widgets are in separate boxes. When set to ‘flat,’ in sidebar option menu, titles are difficult to look at. (Too bright, too big). All ideas appreciated.

    • says

      Hi George,

      The following CSS should resolve your issues (obviously change the hex color value and font-size to your requirements):

      .suf-widget h3 {
      color: #FFFFFF;
      font-size: 120%;
      }

  3. says

    Hi Gary,
    In all of my Suffusion queries, I seem to land on your page. Well done on suffusion search results with your posts. I would like to inquire about your services, but perhaps you could send me an email for that. Right now, I’m just trying to figure out the CSS to change the post title. I’ve already set colors and font families for h1, h2, etc, but that does not seem to help. I have also put .h1-posttitle {color:#cccccc;} as you suggested above. Nothing. Is there any universal way to change post-titles?
    Thank you for your hard work. GM

  4. JaneofAustralia says

    Hi Gary
    I’m using the magazine version of this theme. I want to change the header font to Edwardian script but I notice in the example you give you refer to font family and then list 3 font names. I don’t understand what this is or where to find the family fonts that go with Edwardian Script. I have been considering a black header rectangular block with the title in white Edwardian script and the image I have for the favicon to be inserted top left or bottom right – I’m not sure – any suggestions? Do you have other tutorials for this suffusion theme?
    Looking forward to leaning – Jane

    • says

      Hi Jane,
      You’ll need some CSS knowledge to change the font to anything other than a ‘web safe’ font. The font to which you refer isn’t a ‘web safe’ font therefore you can either include the font in an image or will need to use CSS to reference the font.
      Version 4 of Suffusion will be released in the next few weeks so it may be worth holding off until then to see what font options are available.

  5. vidi says

    I am stuck with suffusion excerpts and really hope you can help with this – I am using word press latest version which has auto excerpt area and not using the ‘read more’ tag. With suffusion 3.9.6 for all the posts and categories, archives, I have set my posts to show only excerpts and i do not get the read more link to the full post.

    Any help with this will be appreciated. How is it that while using word press excerpt feature the ‘read more’ link doesn’t appear in suffusion excerpts ? Is it a suffusion theme bug or there is a way around it ?

    I tried changing to show full content hoping that the excerpt would automatically break the content and show the read more link. But it doesn’t either way.

    A big Thanks in case if you can find me a way around this.

  6. vidi says

    Hi Gary,

    I did post my question in the suffusion support forum but no one has responded and hence thought of asking for your help. Can you please let me know if there is a way around this ?

    Thanks,
    Vidi

    • says

      Hi Vidi,
      Unfortunately it will probably take quite a bit of time to understand exactly what is happening (and replicate the issue) and why. I can assist you on a paid basis (email me if you’d like to take up this option) but the only other viable alternative is to try the Aquoid forums again. Suffusion is a free Theme therefore support is on a best endeavors basis only by the author however Sayontan (the author) is excellent at trying to assist.

  7. vidi says

    I did search the entire forum for a similar query and also googled for the same. I came across people having the same issue with atalpua theme

  8. says

    I inputted my adsense code into the widget area “below the Header widget” in the Suffusion theme and it’s not appearing there. Is there another action I must take in order for this particular widget to appear?

Australian WordPress Specialist

Australian WordPress Specialists.

OrganicWeb provides leading WordPress solutions. Specialities include developing high converting Websites built with SEO from the ground up. Contact us to get more customers from your Website.

Trackbacks

Leave a Reply