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:
- From the WordPress Dashboard go to ‘Appearance’ then ‘Suffusion Options’
- Click ‘Back-end settings’ -> ‘Custom Includes’
- 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; } - 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.
May 15, 2011 @ 10:55:59
This is incredibly helpful, thanks!
Jun 10, 2011 @ 05:57:18
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
Jun 10, 2011 @ 11:44:45
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.
Sep 25, 2011 @ 13:39:49
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.
Sep 25, 2011 @ 17:36:41
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%;
}
Dec 31, 2011 @ 08:15:43
Thanks so much, this is really helpful.
Jan 19, 2012 @ 22:55:31
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
Jan 20, 2012 @ 10:35:54
Hi Greg,
I’ll email you
Jan 23, 2012 @ 23:58:27
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
Jan 24, 2012 @ 09:58:17
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.
Jan 24, 2012 @ 00:00:04
Well Gary, that would be Learning not leaning. Thanks again, Jane
Jan 24, 2012 @ 17:03:48
Thanks Gary. I will wait for V 4. Also i have access to a whizz kid who lives CSS so I will see what deal I can get.
Thanks and thanks for the tweet.
Jane
Jan 25, 2012 @ 06:33:04
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.
Jan 25, 2012 @ 08:46:33
Hi Vidi,
I recommend searching http://aquoid.com/forum/ to see if your question has been answered there.
Regards
Gary
Jan 25, 2012 @ 21:16:03
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
Jan 25, 2012 @ 21:32:43
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.
Jan 25, 2012 @ 21:21:16
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
Instructions to remove Suffusion Main Navigation Menu | WordPress Specialist
Mar 01, 2012 @ 08:20:15
[...] addthis_share = [];} Print PDF I have written a number of posts relating to the awesome Suffusion Theme for WordPress. Suffusion is an enormously powerful and reliable Theme and Sayontan has spent thousands of hours [...]
» Changing Title Font in Suffusion WordPress Theme Chris Brandson
Apr 27, 2012 @ 08:26:24
[...] in the default font for the Suffusion theme I was using. Fortunately I stumbled across this post http://eckstein.id.au/8774/wordpress/suffusion-title-text/. In a nushell in the WordPress Dashboard under Appearance / Suffusion Options / Back-end settings [...]
Tutorial - Full width footer in WP Suffusion Theme | WordPress Specialist
May 15, 2012 @ 16:34:55
[...] the years I’ve published many Posts on how to configure the very popular Suffusion Theme for WordPress. There are a multitude of styling options available in Suffusion but there is one that is asked for [...]