In Bueno you can add a custom header image. You can set a background color or add a background image. You can use the unique Bueno Featured Posts widget (see this post). You can use the newly introduced custom Menus (see update at the end of this post)…
…And you’ve got a horrible-looking header:
You can change that awful font if you buy the CSS upgrade, of course. But you can also change it via Typekit for free (after you sign up with Typekit and add your Kit ID to your blog). You click the “+ADD” tab next to the font you prefer, paste the appropriate selectors, click Add, click Publish. Note that you’ll have to wait several minutes before you can see the changes.
To change the blog title and the page tabs, you need to paste this into the Selectors box:
.site-title,#pagenav a
But it will probably be better to change the titles of posts, pages and widgets as well; in that case paste this:
.site-title,#pagenav a,.post .title,h3
( If you use the visual editor “headings” for formatting, add all heading tags: h1,h2,h3,h4,h5,h6 )
If you like the font of the post titles, the one that comes closest to it is Adelle Web (Typekit > Serif p.1):
But in my opinion the best choice would be Legitima (Typekit > Serif p.3):
Other possibilities (excluding quirky fonts that might be ok for a particular type of content only):
Vollkorn (Typekit > Serif p.3)
Apolline (Typekit > Serif p.1)
Sorts Mill Goudy (Typekit > Serif p.2)
Angie (Typekit > Sans Serif p.1)
wordpress tips 
Thank you, Panos! See? I knew when I set up my knitting blog with a different user account it would come in handy. :)
Posted by Jennifer | May 30, 2010, 23:44You’re welcome! Do you like any of the fonts I’m suggesting? (I selected them after trying all the serif fonts and several of the sans serif ones.)
Posted by Panos | May 31, 2010, 03:07I’d like to try an all lower case font for the blog title and nav tabs. I’ve been unable to indentify any in typekit. Suggestions?
Is it possible to adjust the font sizes of the nav and blog title without buying css? I doubt it but thought I’d ask.
Thanks for your fantastic site. This is a godsend.
Posted by pr | May 31, 2010, 04:01@pr: You’re welcome and thanks for the compliment!
With Typekit you can change the font type only, not the size or the style. And all the Typekit fonts I suggested have a full set of characters (notice the post title in the screenshots I’ve posted): blog title in all caps was a decision of the designer of the theme, it’s defined in the CSS of the theme, and it can only be changed via CSS editing, not via Typekit. If you decide to buy the CSS upgrade, I can tell you how to turn the title into lowercase and how to change the font size – but I don’t think it’s worth buying the upgrade just for that.
Posted by Panos | May 31, 2010, 04:29Legitima looks fantastic. Since when is Typekit free?
Posted by Sandra Lee | May 31, 2010, 06:32Since it was first introduced. It’s just that the free/trial account is limited to one blog and 2 fonts.
Posted by Panos | May 31, 2010, 06:45By the way: now that you switched back to Inuit Types, why don’t you place the header image in the title area?
Posted by Panos | May 31, 2010, 06:54With only two fonts to choose from in the trial TypeKit option, I’ll have another look. One of the things I do like is the mix of serif and sans serif together.
Posted by Jennifer | May 31, 2010, 07:36I’m not sure what you mean: is it clear to you that you can change which two those two are?
Posted by Panos | May 31, 2010, 08:30Panos, Thanks for the suggestion, but I am confused. Which header image do you mean? I did have the bamboo in the intro box, but I removed it when I selected the 2 featured posts. Do you mean the small bamboo or the lotus I had next to the title in Bueno or something else? (I did look at your instructions on placing a header earlier today.)
I’m confused by the meaning of “header image” since sometimes it refers to the big photo headers but sometimes it seems to just refer to all the intro space before the content.
What I would like to know is how to place a small logo before or after the blog title (and then is that called the header in the CSS style sheet?).
Thanks for your suggestion.
Posted by Sandra Lee | May 31, 2010, 15:25OK, I put the bamboo back in. I think that’s what you might mean. What do you think? If the bamboo stays then I probably don’t need a logo image too.
Posted by Sandra Lee | May 31, 2010, 15:58I meant a version of that image placed where the title is, not below the title.
Posted by Panos | May 31, 2010, 16:44Of course I meant, just two *at a time* with the trial version. (Obviously was in need of my second cup of coffee when I answered above.)
Posted by Jennifer | May 31, 2010, 19:57I see. The image with the title then, not just the image?
Posted by Sandra Lee | May 31, 2010, 21:10Yes, the image with the title, placed in front of the original title:
https://wpbtips.wordpress.com/2010/04/19/header-image-in-inuit-types/
Posted by Panos | June 1, 2010, 01:01Panos thank you for the post, it has helped me so much as I am a new user of wordpress.
I do have a question and if anyone can help me answer it, I thank you beforehand. I’ve managed to change the font on almost all of the blog, except the links below the widgets; I don’t know the abbreviation of/for the selector, and not sure if its even possible to change the font in that area of the widget. If you visit my blog, you will notice the two different fonts I’m using, and below the widget links, the default font for the theme.
Thanks again,
Omar
cervezaplease.wordpress.com
Posted by omarkalifornia | June 15, 2010, 09:58@Omar: You’re welcome.
The selector for listed items in widgets is this:
.widget ul li
If you wish to change the “Subscribe” text too, the selector is:
.widget p
If you’re using Firefox, you can add the Firebug add-on that lets you examine the CSS of a page and helps identify selectors.
Posted by Panos | June 15, 2010, 11:08Hi Panos!!
I’ve been wanting to change the fonts for my (not yet public) blog for a while and your post really helped! I’m now just having trouble deciding which to use! hehe
I was wondering if you know if it’s possible to change the widget listed items font color to black. Since my background isn’t white, I think it would look nicer if it were darker…
Anyway, thank you for the help!
Miri Balen
Posted by miribalen | July 9, 2010, 16:54Oh, and I forgot to ask you another question. The actual issue that made me find your blog: do you know why I can’t seem to align the image to “center” (or any other alignment that’s not left, btw) in the Image Widget?
Thanks again!
Miri
Posted by miribalen | July 9, 2010, 16:58Hi Miri,
a) You can’t change the color of widget items without the paid CSS upgrade.
b) There’s a mistake in the CSS of the theme that makes the alignment command be ignored. If you paste the URL of the image here, I’ll give you a substitute code for centering it.
Posted by Panos | July 9, 2010, 17:32Panos,
Thanks A LOT for your reply! The problem is that I’m a newbie in wp.com and I don’t know anything about css or html…
a) how would I do that? hehe
b) here’s the URL: http://cocotteminute.files.wordpress.com/2010/07/xicrinha2.gif
I really appreciate your help!
Posted by miribalen | July 9, 2010, 17:43Sorry, obviously that’s from your private blog – I can’t access the file. Can you tell me how many pixels wide it is? If you tell me that, I can give you the right code without seeing the image.
Posted by Panos | July 9, 2010, 17:52Oops, sorry for that! I didn’t want to make it available until it was all set!
These are the dimensions: 240 × 168 ! I have also set it to public, if it’s easier…
I have one last question and I promise I will stop bothering you: is it possible to take out those bullets that appear in front of the links? how would I do that?
Thank you, thank you, thank you!
Posted by miribalen | July 9, 2010, 18:10You’re welcome and you’re not bothering me.
Copy-paste this into a Text widget:
<img style="padding-left:30px;" src="http://cocotteminute.files.wordpress.com/2010/07/xicrinha2.gif" />
Take out the bullets? Not possible without the paid CSS upgrade… Workaround: remove the Links widget and create lists of links in text widgets instead. In a text widget you can format the content any way you like – no bullets, black color, anything (for starters, see my posts on formatting text).
Posted by Panos | July 9, 2010, 21:17Yey! Your suggestions and your formatting text posts made wonders!!
Check out what I was able to do so far: http://cocotteminute.wordpress.com/. (I’m still working on the layout and my blog is in Portuguese, so don’t judge! hehe) My only issue now is that, for some reason I can’t find out, everytime I include the “target=”_blank”” code so that my links open in another window and press the “save” button from the text widget, it erases all my style codes (font size and color) AND the the target=”_blank”code. This is really annoying but I will find out why! hehe
I just wanted to thank you for all your help! Not even my husband, who is a designer, knows this stuff and was able to help! Thanks again!
Posted by miribalen | July 10, 2010, 00:38Thanks, Panos!!!
I used your list code and it comes with the bullets, which I think looks nice!
My problem with the bullets was that I was using the link widget to include my “twitter” link and the bullet appeared, which didn’t look good at all since I was using a image. That was solved with your tutorial on how to use the text widget for links and images!
I just hope I stop obsessing with the layout and start blogging soon…
Posted by miribalen | July 10, 2010, 01:37You’re welcome again – kudos for blackish purple instead of black, and for catching up on code so quickly!
If the code is erased, then you’ve got some typo that makes the code invalid. And I thought you wanted no bullets. Example for both:
<a href="http://www.fernandaweber.com/blog/" target="_blank" style="font-size:140%;font-weight:bold;color:#330033;">No room for Bling Bling</a><br />
<a href="http://www.punkponey.com/" target="_blank" style="font-size:140%;font-weight:bold;color:#330033;">Punk Poney</a><br />
<a href="http://tokyofeelings.wordpress.com/" target="_blank" style="font-size:140%;font-weight:bold;color:#330033;">Tokyo Feelings</a>
Posted by Panos | July 10, 2010, 01:18For the record, listed items in other widgets (Links, Categories etc.) use the ul/li code, and its style is defined in the CSS of the theme; so when you use the same code in a text widget, you get the same style – in your case bullets.
A detail I didn’t think of before: if you want your purple to be identical to that of the theme, the hex is 3b0466.
Correct, stop obsessing with the layout and start blogging!
(But how about changing the font of the title? That font calls for bullet holes instead of hearts…)
Posted by Panos | July 10, 2010, 02:25This improves Bueno a lot. The one thing I can’t workout though is how you change the font of the sub menus in the dropdown menus. They stay Helvetica. Have looked at the page in Firebug and tried various things such as .nav but with no luck.
Posted by David | August 8, 2010, 14:11@David: Sorry, I can’t find it either. Better ask at the CSS section of the wp.com forum: http://en.forums.wordpress.com/ . We’ve got at least one CSS wizard (hallluke) who will definitely be able to tell you.
Posted by Panos | August 9, 2010, 02:07Thanks Panos – will do. Your site is much appreciated. I just moved from my own hosted WP blog to Wp.Com and it’s helped me enormously.
Posted by David | August 9, 2010, 09:46I’m trying to change the font in my beuno theme and it asks me what theme I use the Beuno theme is not an option. Is there a way around this? Thank you.
Posted by cheddar | August 13, 2010, 01:55@David: Thank you for your kind words – but in this case I failed!
@cheddar: Who’s asking you what theme you’re using? I’m not aware of anything like that in Typekit.
Posted by Panos | August 14, 2010, 02:00Reply to David’s question here (as expected):
http://en.forums.wordpress.com/topic/bueno-dropdowns-and-typekit?replies=3#post-497697
Posted by Panos | August 17, 2010, 08:03Panos,
You mentioned that you could also share how to change the Font Family for the pagenav via CSS. Would you mind posting some instructions on what CSS should be added.
I have been able to get rid of the Impact font, but I can’t get it to change to anything other than Arial/helvetica.
Any insight would be awesome. Thank you!
Posted by Nick | August 28, 2010, 06:17@Nick: The disadvantage if you use CSS editing is that you must limit yourself to “browser-safe” fonts – see here:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
On the other hand, CSS allows you to get rid of the capitalization if you wish, as well as change size, color etc. Example:
#pagenav a { text-transform: none; font-weight: bold; font-size: 16px; font-family: Georgia, sans-serif; color: #660000; }
For submenus you need to add “!important”. Example:
#pagenav li ul a:link, #pagenav li ul a:visited { font-family: Georgia, sans-serif !important; font-size: 10px; }
Posted by Panos | August 28, 2010, 08:42@Panos Thanks for the quick response and browser-safe link.
Unfortunately, I can’t get either one of those code snipets to work. They change the font from Impact, but no other changes seem to work.
Everything is lowercase Arial. I even tried changing text-transform to uppercase just to test and it doesn’t work. We had previously used Typekit, but have since deleted the account. Could that have altered something in the CSS that is not allowing me to make changes?
http://jessicamarchetti.wordpress.com
Posted by Nick | August 28, 2010, 20:20You’re welcome.
No, Typekit doesn’t alter your actual CSS.
What browser and version are you using?
Posted by Panos | August 28, 2010, 23:36@Panos, thanks for having this query regarding the Bueno theme. I have 2 questions. I am a newbie to wordpress.com and have been sitting here for 2 days trying to figure out how to do the following:
1. Is it possible to have my customer header in place INSTEAD of the default one? As it stands now, my customer header is listed below the default one and I don’t like the way it looks.
2. How do I drag widgets to the to go across the top bar? On my dashboard it only allows me to drag to the sidebar and three footers. I would like to create categories up there and have a category cloud then in the footer.
Again, thanks for your time spent in advance and I appreciate any feedback.
Luellasays.wordpress.com
Posted by Luella says | September 14, 2010, 06:451. As a rule, the option to hide the default title is only available in themes in which the title is inside the header image area. And deleting the title is very bad for search engines. So you can’t really get rid of the default title in Bueno – unless you buy the CSS upgrade (but it’s not worth buying it just for that).
2. Widgets are for the sidebar (or footer area). To display post categories in the header area, you need to create a custom menu – see here:
http://en.support.wordpress.com/menus/
You’ll need to add the pages you’ve got now plus your categories. But if you add several categories, the header will be very cluttered; so I would suggest you add a non-linking tab named “Categories” or whatever, with the actual categories as a dropdown. See here how to create the non-linking tab:
http://en.forums.wordpress.com/topic/category-drop-down-menu?replies=6#post-478269
The drawback of a custom menu is that you’ll have to update it manually each time you add a new category. Adding the Categories widget to your sidebar is simpler, as it updates automatically.
Posted by Panos | September 14, 2010, 18:23Hi,
I improved Bueno changing the Typekit as you detailed and it worked fine.
BUT later on I bought the CSS upgrade (I had more reasons and decided it was worth it). I edited the header text so it wasn’t all uppercase and now the Typekit is not working anymore
I have tried to reset the typekit but I can’t get it to work…
any ideas?
thanks in advance!
Posted by betesiclicks | October 9, 2010, 12:19@betesiclicks: I’m not aware of any connection between CSS changes and Typekit (but I could be wrong). For starters please link to the blog in question.
Posted by Panos | October 10, 2010, 12:50Hi
I’ve just started blogging (Two and a half weeks) and am planning to create a fan site for one of my favorite TV shows.
Will using (.site-title,#pagenav a,.post .title,h1,h2,h3,h4,h5,h6 as recommended above) also change the drop down menus on the the page tabs?
I’m using a custom menu widget, which seems to have already changed the font of these drop down menu links.
Could you also suggest a “quirky” font after seeing my site?
Link : http://bigbangtheoryblog.wordpress.com/
Are there any font editors other than Typekit which are usable?
I’m using the free version of Typekit.
Any assistance greatly appreciated.
Posted by Dhruv Arora | October 19, 2010, 21:57Will those selectors also change the dropdowns?
No: they can only be changed if you buy the CSS upgrade. See comments August 8 and August 17 above.
Other font editors?
In a post or a static page or a text widget you can change the font via HTML coding (see “Formatting text pt. 5” in my left sidebar); but elements whose appearance you don’t directly control can only be changed via Typekit or the paid CSS upgrade.
Suggest a quirky font?
No: that’s up to you!
Posted by Panos | October 20, 2010, 05:28Thank you so much for providing these instructions!!! My modification to my site was SUCCESSFUL!!! You’ve save me so much time! Happy New Year!!!! :)
Posted by lmlifestyledesign | January 2, 2011, 21:25Hey Panos,
Thanks for the site, it’s sure to be indispensable to me and the rest of the WP.com users.
My question is, I appear to be the only person who’s tried using typekit and still has that godawful Impact blog title. I’ve been fudging with fonts all morning [settled on Vollkorn, good tip!] and everything changes except the thing I wanted to change in the first place. Bizarre.
Any ideas what I’m missing?
Jordan
Posted by Jordan Ferguson | January 3, 2011, 22:41@lmlifestyledesign: You’re welcome and Happy New Year to you too!
@Jordan: Can’t tell without a link to the blog in question!
Posted by Panos | January 4, 2011, 09:44Interesting, I thought my name would have provided a link. Something else to fix, ha.
poetryforgravediggers.wordpress.com
I’ve got Vollkorn on all the headings, but that awful title won’t correct itself. I’m really fond of the Bueno theme, I don’t want to have to ditch it over this. :/
Posted by Jordan Ferguson | January 4, 2011, 16:37And again it doesn’t link. Apologies. Hope this does.
http://poetryforgravediggers.wordpress.com
Posted by Jordan Ferguson | January 4, 2011, 16:42To turn your name into a link to your blog: Users > Personal Settings: scroll down to Account Details, paste blog URL in ‘website’ field, save changes.
My first suspicion re your blog title was a cache problem, but no: the CSS of your page shows vollkorn for the page tabs but not for the title, so you probably haven’t used the right selector. Make sure you’ve added the selector for the title exactly as shown in my post.
Posted by Panos | January 6, 2011, 16:06That did it. I was under the impression the ‘site-title’ selector was meant to be swapped out with the actual name of the site. Whoops!
Thanks so much, Panos. Your work is much appreciated by those of us on the .com side of the WordPress coin.
Posted by Jordan Ferguson | January 6, 2011, 18:07You’re welcome, and thanks for your kind words!
Posted by Panos | January 7, 2011, 13:53I finally managed to figure out how to apply a new font to my blog…….well most of it at least! The header, some of the menu titles were changed to the new font, but the text in my posts are still using the default; how on earth do I change that too? Thanks!
Posted by chicchinois | January 9, 2011, 09:41The selector you need to add is this:
body
Posted by Panos | January 9, 2011, 11:29Hi,
This is wonderful help- thank you! In your last comment, you stated the selector you need to add is “body” – do you add it in the quotes or without? Thank you!
Posted by megansemmelman | January 31, 2011, 09:06You’re welcome.
Without – selectors don’t have quotation marks. I edited the comment to eliminate the ambiguity.
Posted by Panos | January 31, 2011, 13:44This is a lifesaver! I tried figuring out which selector would change the blog title, and this finally worked! Thank you for sharing!
Posted by Holly | February 4, 2011, 21:37You’re welcome. Typekit is a nice addition, but it’s almost useless to the majority of users (who don’t know CSS).
Posted by Panos | February 4, 2011, 22:57You really are a wonderful person for posting this!
Posted by Creatabot | February 4, 2011, 23:59Why on earth WordPress cant supply this information themselves i will never know!
Posted by Creatabot | February 5, 2011, 00:05I meant typekit!
Posted by Creatabot | February 5, 2011, 00:05Both WordPress and (basic) Typekit are free services: in my view, when you pay nothing you shouldn’t expect everything!
The difficulty is that the list of selectors is practically endless: each element is controlled by a different selector, and each theme designer names selectors in a different way. (What’s worse, the names aren’t always obvious: for example, would you ever imagine that to change the footer in one theme you have to write “#glass-bottomblock”?) But Typekit has added support for several themes, and maybe the list will grow.
Posted by Panos | February 5, 2011, 11:14Hi Panos,
Thanks – your suggestions have worked well with most of my blog. Do you have the code for the font for the tags in the tag cloud so I can add that to the selector?
Thanks,
Rosie
Posted by rosieniven | February 11, 2011, 03:06Hi,
The blog linked to your username is using Tarski. Assuming you’re talking about another blog, using Bueno, the selector is this:
#wp_tag_cloud a
Posted by Panos | February 11, 2011, 05:19Hi Panos – yes I have another blog. That worked. Thanks for your help. You are a genius!
Posted by rosieniven | February 16, 2011, 22:19You’re welcome!
(I’m not a genius, I’m just using Firefox with the Firebug and Aardvark add-ons and have some knowledge of CSS.)
Posted by Panos | February 17, 2011, 01:30I have a question in regard to the weight of the header font I am using. I selected “bistro” from typekit, and while it is showing up on my blog, it is adding additional weight to it to give it a thicker, “bold” effect. Although the font itself only comes as “regular”. I cant seem to find how to remove this thickness. Any ideas would be much appreciated! http://321foto.wordpress.com
Posted by 321 FOTO | February 18, 2011, 09:34@321: Normally what you’re describing should only happen if the font did include a bold variant (because the CSS of the theme specifies bold for post titles etc.). But the free Typekit account I’ve got doesn’t seem to include that font, so I can’t really test things. Can you link to the page with that font?
Posted by Panos | February 18, 2011, 23:07Hey Panos, thanks so much for the quick reply! The font is only available in “Regular”, and is not available in bold at all. So I am really confused as to where the extra type weight is being added. It is much crisper than what is showing up in bueno.
The font can be viewed here: http://typekit.com/fonts/bistro-script-web
Posted by 321 FOTO | February 18, 2011, 23:27Thanks. All I can tell is that it’s not an illusion (I carefully compared screenshots in Photoshop), and it doesn’t seem to be browser related, as I get the same problem in three different browsers. But I’m not familiar with how Typekit works, so I can’t say why this is happening. So I suggest you ask over at Typekit: they’ll probably reply soon.
One thing I would try if I were you would be temporarily switching to other themes to see if the culprit is Bueno or the font. For other themes with bold post titles check this post of mine:
https://wpbtips.wordpress.com/2010/09/07/theme-fonts/
(But you’ll need a different selector in each case.)
Posted by Panos | February 19, 2011, 02:41Panos – thanks so much for posting this. It has been really helpful. CJ
Posted by CJ | March 5, 2011, 16:10You’re welcome (but I’m not seeing any changes in the blog linked to your username).
Posted by Panos | March 6, 2011, 12:11No, it is on my other blog (www.sweetaustinchild.com) which is self-hosted and which I’m struggling with because I don’t know the CSS. However, I’ll get there thanks to your advice above.
Posted by CJ | March 6, 2011, 15:54Hi Panos!
Thank you for posting this. It is such a tremendous help! However, I’m facing a little bit of a problem. It looks like my new typekit font has taken over all of the fields I asked it too, EXCEPT the header. Do you know what I’m doing wrong? Here’s a link to my blog so you can get a better idea of what I’m talking about:
http://seaskylark.wordpress.com/
Posted by seaskylark | March 7, 2011, 22:38@CJ: I can’t offer help for self-hosted blogs. But you can help yourself much by using Firefox with the Firebug add-on installed: helps you examine your page and identify selectors.
@seaskylark: Your blog title and your top nav tabs are in Learning Curve. You mean that you’re not seeing this or that you expect a different font?
Posted by Panos | March 8, 2011, 01:20I was able to change my blog title using: .site-title,#pagenav a
with a font that looked worse than the default. I selected a second font and followed the same steps to change it again, but nope, it wouldn’t let me. Ideas?
http://seamlessproductions.wordpress.com/
Posted by seamlessproductions | March 15, 2011, 08:22Did you remove the other font from your kit?
Posted by Panos | March 15, 2011, 22:51Thanks for your quick response! Yes. I did remove other font and then loaded one I liked and tried it. *That didn’t work so I tried deleting everything thinking it would default back to original font (Impact I believe). the site still wasn’t showing any changes. I gave up after about 10 tries. This was last night at about 9:00pm.
Here’s the weird thing: I looked at the blog earlier today and it was the font I wanted. I logged in again now (about 4 hours later) and it was back to original. I’m wondering, do you think it just took WordPress servers that long to cycle through and reload?
Maybe I’m missing something else here. Thanks again.
Posted by seamlessproductions | March 16, 2011, 04:36At the moment your blog title, page tabs, widget titles, main body text etc. are in Le Havre. Your problem probably is/was a combination of how Typekit works and how your browser works. Try clearing your browser’s cache as well as checking your blog with a browser you don’t normally use.
Posted by Panos | March 16, 2011, 09:57Panos, I can’t tell you how much I appreciate this post!
Question for you: what is the selector for the “Older Entries” and “Newer Entries” links?
Posted by thesweetbeast | March 20, 2011, 00:26.more_entries
Posted by Panos | March 20, 2011, 00:41Perfect. Thank you!
Posted by thesweetbeast | March 20, 2011, 02:16You’re welcome. On another issue: Your front page takes too long to load because you’ve got too many posts with too many images. For a visitor with a slow connection, the browser may time out before fully loading. You’d better reduce the number of posts per page (Settings>Reading) and truncate the posts by using the read-more tag.
Posted by Panos | March 20, 2011, 11:32Thanks for the advice. I hadn’t really thought about it because I typically always have a super fast connection. I reduced the number of posts per page to 4 and truncated the more picture heavy posts, I can tell it’s loading faster now and can see why it had been a problem before!
Thanks again!
Posted by thesweetbeast | March 20, 2011, 18:21Thank you so much for this incredible page. I’m finding typekit somewhat confusing and am wondering if you can help.
The clear instructions about changing the blog title were fantastic. Can you reiterate the list of selectors for the remaining components, including regular text?
Also, I used the featured pictures process for highlights, however, the thumbnails are not appearing.
This blog is still in a very preliminary, test stage, and any help with this styling would be extremely welcome:
http://theprogressweekly.wordpress.com/
Posted by gn | April 17, 2011, 18:33Nevermind about the featured images. Figured that one out.
Posted by gn | April 17, 2011, 18:36You’re welcome!
Typekit is difficult if you don’t have any experience in CSS editing.
Selector for regular text in posts and pages is this:
.entry
“Selectors for the remaining components” are too many for me to list, especially since you may never need some (or most) of them. Better tell me what else you’d like to change.
If you’re using Firefox, you can also install the Firebug add-on and start trying to examine the CSS of your blog yourself.
Posted by Panos | April 18, 2011, 04:37Thank you so much panos. Can you tell me the selector for the heading above each highlighted post? That’s the last selector I need to find. Thanks again, this post and comments section is so helpful.
Posted by gn | April 19, 2011, 01:13I understand you mean the headings in the Bueno Featured Posts widget. Selector:
#container .widget-bueno-featured .right h4 a
Posted by Panos | April 19, 2011, 07:37Thank you, Panos. And can I confirm that the featured image double post issue has been resolved? It looks as if the featured image is no longer automatically posting within the blog entry. Thanks so much, again.
Posted by gn | April 19, 2011, 13:50You’re welcome.
Double post issue? You mean on the homepage or when viewing a single post?
Posted by Panos | April 20, 2011, 01:53Great post!
A quick Bueno CSS question you may be able to answer- any idea why I can’t use Special Characters inside of my H1 tags with Bueno? I’ve tried using ascii code (&), html (&) as well as just plain “&” in the visual editor mode. All three result in the special character NOT being displayed on the published page.
I’ve also tried to add a new class to my custom.css, and then wrapped the special character in a span:
Comments &
None of this has solved the issue! Any thoughts?
Posted by Bueno User | May 7, 2011, 19:03Hi,
I’m not sure I understand the question. H1 tags where, and why use special characters? A link to your blog would help.
As for displaying code, check point 4 here:
https://wpbtips.wordpress.com/comment-guidelines/
Posted by Panos | May 8, 2011, 16:25Dear Panos:
I have been using, successfully, because of your advice here, Typekit fonts on one of my blogs:
http://shortstoriesandy.wordpress.com/
However, today I signed up to Typekit for a year, and added a new blog which I have been unable to convert to a new font:
http://hereinvannuys.wordpress.com/
The WP Theme is Pilcrow. The Typekit font I want displayed is called “Sorts Mill Goudy”.
The selectors I have added are:
#pagenav a .post .title .site-title h3
What am I doing wrong? I am also using Google Chrome to view the blog.
Sincerely,
Andy
Posted by Here in Van Nuys | May 18, 2011, 20:47What you’re doing wrong is trying to use the same selectors while you’re using a different theme. Unfortunately CSS selectors are theme-specific: each designer can specify each element in a different way. Which elements do you wish to change?
Posted by Panos | May 19, 2011, 01:29Thank you Panos. After spending six hours trading emails back and forth with Typekit and having no success, I went back to Oulipo Theme, which Typekit says it does not support, but I actually see Sorts Mill Goudy in the post titles.
I would like to change everything to Sorts Mill Goudy, including widgets, Header Title, Post Title, Text Title, etc.
http://www.hereinvannuys.com
Posted by Here in Van Nuys | May 19, 2011, 01:37Typekit doesn’t support Oulipo (along with 110 other themes) but all wp.com themes support Typekit. Theme supported by Typekit simply means you can select from a list of elements in normal human language (such as “blog title heading”) instead of having to find and add the appropriate arcane selectors (which requires CSS editing experience).
Now, to change literally everything in Oulipo you need to add this:
body,.delicious-desc,h1,h2,h3,h4,h5,#main-nav ul,p.date,.description,.ctitle,.fin,.entry > p:first-child:first-line,.error,.navigation,.more-link,.comment-author,.comment-meta,#entry-content p.tags strong
Posted by Panos | May 19, 2011, 02:45Panos,
How come Typekit doesn’t hire you?
Your directions parallel what I did yesterday and now my page has my new choice font of Rooney (not Sorts Mill) in all the places I need: http://www.hereinvannuys.com
I have no CSS editing experience. But I did download Firebug and used it to read someone else’s “Oulipo” Themed Blog. I then painstakingly went through all the terms to try and find those elements (to put into the Typekit Selector) which might convert my own blog into Rooney.
Typekit specializes in creating and making available well designed typefaces. They are in the communication and design business. How can they offer a service to the general blogging public that impedes, confuses and frustrates? And which is so very difficult to master and understand?
Posted by Here in Van Nuys | May 19, 2011, 17:08Since they haven’t hired me, I cannot answer your (rhetorical) questions on their behalf!…
And if you have no CSS experience, then you deserve congratulations for managing to use Firebug successfully!
Posted by Panos | May 20, 2011, 05:12Hello,
I hope you can help me out with this. It doesn’t have to do with the font but it is still about Bueno theme and CSS (something that is completely alien to me).
I need to hide the “leave a replay” box in the about page. I ‘ve purchase the upgrade for customise CSS in order to hide all the “comments closed” boxes from all the posts .I’ve copied this to CSS editor:
.date {
display:none;
}
But in the about page there’s still the “leave a replay”, and I’m not able to find a solution in any forum..
Can you help me? (if this makes any sense to you-for me is greek-)
THAAAANKS!!!!!!
Posted by ceciliamarin | May 25, 2011, 20:11You’re mixing three different things in your comment:
a) removing the date stamp (which is what the CSS you pasted does);
b) removing the comment box from your about page;
c) removing the “comments are closed” box from the posts.
Re b: you don’t need any CSS, you only need to edit the page and uncheck the options “Allow comments” and “Allow pingbacks and trackbacks”. (I was a bit perplexed to see this question, because you have already done that for your posts.)
Re c, you need to add this to your CSS:
#comments {
display:none;
}
If you also want to eliminate the box that says “Comments” and “Comments off” from below each post, you can add this:
.post-meta li.comments {
display:none;
}
Best practice is to add them all as one command. Change this:
.date {
display:none;
}
to this:
.date, #comments, .post-meta li.comments {
display:none;
}
Posted by Panos | May 26, 2011, 01:06thanks for the reply! I’ve copied the code into the CSS box and it works fine as for the boxes “comments off” and “comments closes”.
Still, in my about page, there’s the box “Leave a reply” that it won’t hide.
Could you give me a hand with that, please? thanks!, really appreciate it!
Posted by cecilia marin | May 27, 2011, 15:16But I’ve already told you about that too: page editor > Discussion module: uncheck “Allow comments” and “Allow pingbacks and trackbacks”, click Update.
Posted by Panos | May 27, 2011, 18:47I have a hosted blog @ http://www.the530bride.com and I’ve gone through and changed all of the fonts in the CSS and the blog title IS STILL THE SAME as it was.
Help?! I just want a softer looking font for the title!
Posted by The530Bride | May 31, 2011, 00:24My blog is about wp.com blogs only, but anyway this is what I’m seeing:
If you’re not seeing this, then you need to clear your browser’s cache.
Posted by Panos | May 31, 2011, 01:04Thank you! I actually figured out what I had done wrong about ten minutes after I posted this question…lol
Don’t suppose you know how to add a second sidebar to Bueno? lol
Posted by The530Bride | May 31, 2011, 01:17You’re welcome!
As I said, my blog is about wp.com blogs. If you had a wp.com blog, I would tell you that
a) you cannot literally add a second sidebar,
b) but Bueno has a footer widget area, so you could use CSS to reformat it and reposition it next to the existing sidebar,
c) but this isn’t something I would be willing to work out, first because it would require extensive changes, second because
d) I don’t consider it a reasonable thing to do.
But you’re talking about a self-hosted blog: your software is different, so I can’t help. Point d stands, however: if you need two sidebars, use a theme with two sidebars. Changing the appearance of a theme is easier than changing its structure.
Posted by Panos | May 31, 2011, 07:47Hope my question is as simple as I hope it wil be… Im trying to upload images in my posts and in the published version they come out as thumbnails. Is there something I should do in the media library settings to make sure they dont?…
Posted by itsonlyfrocknrollbutilikeit | July 4, 2011, 22:27Link to such a post please: the blog linked to your username is practically empty.
Posted by Panos | July 5, 2011, 00:16You can see http://itsonlyfrocknrollbutilikeit.wordpress.com/press/ I havent published the posts yet cause Im trying to resolve the image thing
Thanx for your time
Posted by Anonymous | July 5, 2011, 11:00You’re welcome, but I can’t help if I cannot check to see what you’re doing wrong. You should either publish a post or tell me step-by-step exactly what you’ve tried.
Posted by Panos | July 5, 2011, 20:03I’ve now posted a few pictures, try see them in https://itsonlyfrocknrollbutilikeit.wordpress.com/ They’re all thumbnail size, for some reason, and they only get bigger when you click on them – thanx
Posted by itsonlyfrocknrollbutilikeit | July 7, 2011, 22:57Ah, you mean a gallery. Switch the post editor to HTML and change the gallery shortcode to this:
[gallery columns="1" size="full"]
Posted by Panos | July 7, 2011, 23:09Niiiiice, thank you sooooo! :)
Posted by itsonlyfrocknrollbutilikeit | July 7, 2011, 23:39You’re welcome!
More info on the gallery feature:
http://en.support.wordpress.com/images/gallery/
http://gammagirl.wordpress.com/2008/07/27/not-the-official-wordpresscom-gallery-faq/
But note that you get better image quality if you upload and insert individual images downsized to the right width for the theme you’re using – see here:
https://wpbtips.wordpress.com/2010/01/16/image-quality/
Posted by Panos | July 8, 2011, 00:01Wow! I had no idea that you could get Typekit for Free, thank you very much for sharing this Panos, now I can fix some of these ugly font issues on certain themes! ;) :)
Posted by John Jr | March 5, 2012, 06:35You’re welcome, but TK is no longer for free: they combined it with CSS into the new “Custom Design” upgrade. If you had set up a kit when it was free, you can still use it, otherwise I think no.
Posted by Panos | March 5, 2012, 20:18I think you are correct Panos, last night I stayed up trying to figure out how to but the Custom Font Area into Advanced Mode, so that I could enter my Typekit API; I even changed themes to see if could use Advanced Mode, but it still did not work. :(
If only the Duster/Twenty Eleven themes had a font option for the font of the Twenty Ten theme, among other things/features, that would be nice.
I guess I was too late to the game, hehehe, oh well. :D
I still would like to thank you for sharing this Panos, maybe they read this guide too, and they decided to prevent this little way around not having to pay. ;)
Posted by John Jr | March 5, 2012, 20:30No no, this little way was official at first. Then they made an agreement with Typekit and incorporated it in the upgrade.
What font are you referring to? titles or content? If you mean the content of your posts, you can change the font without the upgrade.
Posted by Panos | March 5, 2012, 20:48Oh, thank you for informing me on that. :)
The Body Font for the Twenty Ten theme seems to be a nice large Serif font that is easy to read, I just think it would be nice if there was a Serif font option for the Duster/Twenty Eleven/and some other themes Body & Title areas.
Really? So how can you change the Body and/or Title Fonts without the Upgrade, Panos? :)
Posted by John Jr | March 5, 2012, 21:00Blog title, post titles, widget titles etc. can’t be changed without the upgrade. But the content of a post can. See here:
https://wpbtips.wordpress.com/2009/07/11/formatting-text-pt-5/
To turn complete posts into the font used in Twenty Ten, you’d use this in the HTML editor:
<div style="font-family:georgia;">
COMPLETE CONTENT HERE
</div>
If you want to make it larger as well, use this instead:
<div style="font-size:110%;font-family:georgia;">
COMPLETE CONTENT HERE
</div>
Posted by Panos | March 5, 2012, 21:14So that is what you meant, wow, thank you Panos! :)
This tip could be a game changer for people wanting to improve readability of their Posts without paying and/or changing themes. :)
I owe you one, if you need some help with something, just let me know. ;)
Posted by John Jr | March 5, 2012, 21:19