Adjust Heading Styles with Custom Design (h1, h2, h3, etc)
-
Again I want to express my frustration to WordPress that CSS information is so difficult to find. I have no idea if the CSS changes by theme or not. If not, then WP would likely save themselves and users a lot of time and frustration by simply posting a list of the working CSS for all fonts usable with the WP Custom Design upgrade. This is not a difficult task. If the CSS does change by theme, then it should be a requirement that with the creation of a new theme, this basic information is provided to the user.
I’m so sorry you were frustrated! I hope that I have helped. In regard to publishing a list of CSS font names, instead of that what we did was to try to make a tool that works out of the box for the majority of users and where you don’t need to know CSS or use any code in order to set it up—the Fonts panel is the result. Those are fonts sourced from a font service, font names are subject to change, and in order to make very detailed customizations like you’re asking, the best route is to learn how to look up the names in the page source. Once you learn how to find the info you need with the web inspector, it shouldn’t be too much trouble to get what you need and I don’t think you’ll need a list. Check out the screencast from my last reply because I think it might be really helpful!
-
No, placing that in my CSS does not make the post text on the home page Droid Sans. It changes it to a very, very plain font. Probably Arial or Helvetica. This is what happens whenever I try to change the font in the CSS, which I’ve tried many times over the past several months, a variety of ways.
Keep in mind you can only use web fonts on the front end if they are selected and saved in the Font panel. You cannot load different fonts on the front end that have not been selected.
-
Thanks very, very much for taking the time to make the How-to video!
I don’t really understand what a “front end” is…I’m guessing that’s the website as it’s “published”? It’s “final” form as the user sees it?
The font names I provided were via the Custom Design Preview “version” of the webpage. I copied and pasted what was in the Rules and Font panels exactly, but this obviously is not yet the “Front End”. Which explains why the names I found for Droid Sam and FF Meta don’t match what is displayed in your video (and what I re-checked on the website before logging into WP). So, it looks like I can’t find the actual names by modifying the fonts inside the Custom Design dialogue. Instead I actually change them. I was hoping not to have to go that route since I didn’t want the site to look poor as I was tinkering, but I think that’s the only way to get the information I need.
Also…omg Style Editor! That is flipping awesome. Like I said, I basically know nothing about css/html/etc. I’m figuring it all out as I go and using the Style Editor will help tremendously.
I’ll check back in once I get the chance to play with things a bit more. Thank you again :)
-
I don’t really understand what a “front end” is…I’m guessing that’s the website as it’s “published”? It’s “final” form as the user sees it?
Exactly.
So, it looks like I can’t find the actual names by modifying the fonts inside the Custom Design dialogue. Instead I actually change them.
True. I’m sorry that’s not easier! I think the names are different because of what I mentioned before about full versions of all fonts being loaded in the Customize tool whereas just the fonts and weights selected in the Appearance > Customize > Fonts panel determine what gets loaded for the user to see on the front end. This is done to make page loads faster.
Also…omg Style Editor! That is flipping awesome. Like I said, I basically know nothing about css/html/etc. I’m figuring it all out as I go and using the Style Editor will help tremendously.
Yay!
-
Well, I finally got all the font codes looked up that I’m interested in. Most are straightforward, once you know that they tend to be the font name, hyphenated, with a “1” appended. There are a few aberrations, however. For folks looking for the same information, here it is:
Adelle: adelle-1
Arimo: arimo-1
Arvo: arvo-1
Brandon Grotesque: brandon-grotesque-1
Bree: bree-1
Calluna: calluna-1
Calluna Sans: calluna-sans-1
Chaparral Pro: chaparral-pro-1
Droid Sans Mono: droid-sans-mono-1
FF Basic Gothic: ff-basic-gothic-web-pro-1
FF Dagny: ff-dagny-web-pro-1
FF Meta: ff-meta-web-pro-1
FF Meta Serif: ff-meta-serif-web-pro-1
FF Tisa: ff-tisa-web-pro-1
FacitWeb: jaf-facitweb-1
Futura: futura-pt-1
Inconsolata: inconsolata-1
Jubilat: jubilat-1
Le Monde Journal: lemonde-journal-1
Le Monde Sans: lemonde-sans-1
LFT Etica Display: etica-display-1
Minion Pro: minion-pro-1
Museo: museo-1
Museo Sans: museo-sans-1
Museo Slab: museo-slab-1
Omnes Pro: omnes-pro-1
Open Sans: open-sans-1
PT Serif: pt-serif-1
Proxima Nova: proxima-nova-1
Puritan: puritan-1
Skolar: skolar-1
Source Sans Pro: source-sans-pro-1
Tinos: tinos-1
Ubuntu: ubuntu-1Since even putting the correct font name into the CSS editor doesn’t result in the correct preview display, I’m about to hunker down with the Style Editor and your video to see if I can preview changes more clearly. Would be great if WP could implement a fix for that, btw.
Will post if I run into trouble :]
-
The font names are from an outside provider and subject to change, so if you spot a problem just check the page source again.
even putting the correct font name into the CSS editor doesn’t result in the correct preview display
I researched this for you. The reason the names are not the same between the live preview with the CSS editor and the site that your viewers see is because the fonts in the live preview load more things so it’s possible to quickly change fonts without waiting for every different subset or part of them load. Once a font is chosen and the setting is saved, only the selected font and options are served (such as semi-bold or italics for example, depending on what each font may have avail and what settings you picked in the font tool). This is done to make the site load faster for the site’s visitors. We use an outside font service called Typekit to serve the fonts. So the font names are different because of the way the font feature is designed to work and how it is optimized for better speed and performance for your site viewers in the site itself compared to loading different things in the CSS Editor live preview.
To use the names you have listed, using built in browser tools to experiment with CSS and then save the result in the CSS editor, as outlined in the video, are the way to go!
-
I finally got back to working on this again and it still isn’t functioning properly. I’m trying to implement two changes, but let me focus on one:
I’d like to have different fonts for my post titles and headings.
Right now these are controlled by the same setting in the Fonts dialog (Headings). Currently, I’m trying to use Droid Sans Mono for post titles and FF Basic Gothic for headings (I’ve been testing H2, specifically). So, I can approach this two ways: set Headings (within Fonts) to Droid Sans Mono and change the headings in the CSS to FF Basic Gothic. Or the revers: set Headings (within Fonts) to FF Basic Gothic and change the post titles in CSS to Droid Sans Mono.
I can’t get either to work.
When I try to change H2 to Droid Sans, I use the following code, which I tracked down by inspecting elements:
.wf-active h2 { font-family: droid-sans-mono-1,droid-sans-mono-2,Arial,Helvetica,sans-serif; font-style: normal; font-weight: 400; font-variant: normal; }The font stack I’m using the exact one my browser tells me WP is using when I set Droid Sans using the actual Fonts dialog. And, I’ve tried the same code both without the bottom 3 parameters and with only the middle bottom parameter (since FF Basic Gothic uses 300 for weight).
None of the three ways works. They all change the font…but not to what Droid Sans actually looks like when you set it via Fonts. Also, the “sans-serif” in my font stack turns red in my CSS (like it’s broken)…despite it being the exact font stack WP supposedly uses. Whether I keep or remove it makes no difference.
I’ve also tried the similar code to modify the posts title parameter (fyi, color/size parameters work properly and pre-date this series of edits):
#posts .postitle, #posts .postitle a { color: #EFEFEF; font-size: 24px; font-family: droid-sans-mono-1,droid-sans-mono-2,Arial,Helvetica,sans-serif; }It also doesn’t work.
Finally, the reverse process doesn’t work. I can’t set Droid Sans Mono in Fonts, and then change the headings (that aren’t post titles) to FF Basic Gothic.
To be clear, I’ve done all this work in the CSS editor, but also saved the changes to view them on the front end. They aren’t “taking.”
I’m not sure what else I could be missing at this point. I’m inspecting everything in the browser both before and after I make the changes. According to the browser the code appears like it should be working. I’m checking through all the rules to make sure another font isn’t present that could be overriding it.
…I’m not sure what else I can try :(
Thanks.
-
Let’s start with this:
I’m trying to use Droid Sans Mono for post titles and FF Basic Gothic for headings (I’ve been testing H2, specifically).
First, post titles are headings, so the first thing you’ll want to do is be careful to note how the theme differentiates those using selectors—that could be where you’re getting hung up.
To get some context, I checked your current Appearance > Customize > Fonts settings and I see that Headings is set to “Droid Sans Mono” and Body Text is set to “FF Meta”. Cool.
Next, it always helps to look at a post as a specific example so we can see what selectors the theme is using so we can use those exact selectors to make overrides.
Let’s look at this post because it has lots of headings in it:
http://thanemod.wordpress.com/2013/09/18/troubleshooting/Here is the HTML being used for the post title :
<h2 class="postitle">Troubleshooting + FAQ</h2>And here is the corresponding CSS from the theme that applies the Headings custom font to that post title:
.wf-active h2 { font-family: droid-sans-mono-1,droid-sans-mono-2,Arial,Helvetica,sans-serif; }In your post, you said you wanted to use Droid Sans Mono for posts titles, and so this confirms that’s how it’s setup before making any custom CSS edits.
Next, let’s look at a few inline titles on that page. Here are a couple examples:
<h3><span style="color:#3366ff;">Updated August 5, 2014</span></h3><h3><span style="color:#59a215;"><strong>Installation + Uninstallation [v1.0 only]</strong></span></h3>The difference between those titles and the post title is a class name of “posttitle” which is used on the post title but not on the inline headings. Also, you’ve setup your inline headings in this post to be h3 instead of h2, so we can use that. We only have two web fonts available to us, and those are the ones selected in the Appearance > Customize > Fonts panel. Right now, you have selected “Droid Sans Mono” for Headings and “FF Meta” for Body Text. So, let’s use “FF Meta” in our example.
To change h3 headings throughout the site and also override the custom fonts heading choice of “Droid Sans Mono” for headings, you can do this:
.wf-active h3 { font-family: ff-meta-web-pro-1,ff-meta-web-pro-2,Arial,Helvetica,sans-serif; }This will not affect post titles because those are h2 instead of h3. So, this example will work on any posts or pages where you have setup the inline headings to be h3. You can also make this difference even more fine-grained if you want to also adjust h2 inside the post vs the h2 used for the post title, but we don’t need to get into that unless you have a use case for it (if you do, let me know and include a link to the page with an example and I will go through it with you).
Originally, you asked to use “FF Basic Gothic” for headings. However, you are limited to web fonts selected in the Appearance > Customize > Fonts and you only may choose two at a time (one for headings, one for body text). So, you can use a font stack to change the font to something else, but whether or not the font displays will be dependent on whether the viewer has the font installed on their computer or not.
Give that last CSS example above a try now and let me know how it works out.
-
However, you are limited to web fonts selected in the Appearance > Customize > Fonts and you only may choose two at a time (one for headings, one for body text). So, you can use a font stack to change the font to something else, but whether or not the font displays will be dependent on whether the viewer has the font installed on their computer or not.
Ok, the mystery is solved. This has been the problem all along. If you or anyone else mentioned it before this, I apologize that I didn’t catch it. Notice in my first post, where I say this:
I’m using a Custom Design upgrade for Triton Lite and I’d like to change the font used for h3/h4 in my posts/pages (so, not the same font as I’ve chosen for h1 and h2).
I didn’t state I wanted to use a different font than for “posts,” but this was what I was trying to do. I was under the impression that the CSS associated with the Custom Design upgrade gave the person complete control over everything like any website; fonts included. So, this whole time I’ve been trying to use
- 3 fonts in my CSS
: post titles, headings (since they are often inside posts and need a different kind of readability), and post text.
Your explanation now makes it clear that the reason why the third font was never “taking” for me was due to the two-font restriction (despite CSS) and me not having the ones I was trying to use installed on my PC.
That piece of information might be a valuable FAQ to your Custom CSS support page. It’s not obvious at all that you simply can’t use more fonts via CSS, assuming you define them correctly. But, I now know this isn’t possible. The two fonts via the Fonts option is a “hard limit.”
TL;DR — You may swap different page elements between the two chosen fonts, but you may ONLY use those two fonts.
My problem can’t be solved then, so please feel free to close the thread. Thanks for all your help :)
-
Ok, the mystery is solved. This has been the problem all along. If you or anyone else mentioned it before this, I apologize that I didn’t catch it.
I looked back and I see that I jumped in to help more in the middle and I was looking at more specific details at that point. Sorry I didn’t make it more clear sooner!
That piece of information might be a valuable FAQ to your Custom CSS support page. It’s not obvious at all that you simply can’t use more fonts via CSS, assuming you define them correctly.
I have updated the support page. Thanks so much for the suggestions.
http://en.support.wordpress.com/custom-design/custom-css/
- The topic ‘Adjust Heading Styles with Custom Design (h1, h2, h3, etc)’ is closed to new replies.
WordPress.com Forums 