Dear wise support men,
Is there a way to have Flashlight make a distiction between headings and subheadings?
I've got my webfonts working, but I want to use Bold for h1 and Regular for h2. Is this there a neat way to configure this?
Different fonts for h1, h2?
17 posts from 3 voices- Started 1 year ago by perenoksson
- Latest reply from perenoksson
- This topic is not resolved
-
Posted 1 year ago #
-
Thanks Dude, I'll try it. The page, by the way, is http://www.hikki.se/
[Edit] Well, no, that didn't make a change. I'm trying to get these two fonts to work, and the first one (Bold) does, but it goes everywhere. The second font (Regular) doesn't load.
I would love it if I could make the sidebar use the first font, and headlines in the content area use the second font. Is that possible?
Posted 1 year ago # -
Thank you very much for responding, Dude. That code didn't change anything (although it didn't break anything either).
I'm still very uncertain on how Flashlight handles all the styling, but I think it loads the Quick CSS last of all, so any tricks may be pasted there. If that isn't always the case, please correct me.
Here below is what I have in my Quick CSS right now. It does load the Tarzana Narrow Bold, but it does so in every heading, and Tarzana Narrow Regular is never seen. Would you, Dude, be able to conclude why that is?
---------
.cufon_headings {
font-family: "tarzanarbol-290711001EmigreWebOnly", Verdana, sans-serif;
}@font-face{
font-family: 'tarzanarbol-290711001EmigreWebOnly';
src: url('wp-content/themes/flashlight/fonts/tarzanarbol-290711001EmigreWebOnly.eot');
src: url('wp-content/themes/flashlight/fonts/tarzanarbol-290711001EmigreWebOnly.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/flashlight/fonts/tarzanarbol-290711001EmigreWebOnly.woff') format('woff');
}@font-face{
font-family: 'TarzaNar-290711001EmigreWebOnly';
src: url('wp-content/themes/flashlight/fonts/TarzaNar-290711001EmigreWebOnly.eot');
src: url('wp-content/themes/flashlight/fonts/TarzaNar-290711001EmigreWebOnly.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/flashlight/fonts/TarzaNar-290711001EmigreWebOnly.woff') format('woff');
}h1 { font-family: 'tarzanarbol-290711001EmigreWebOnly', Verdana, sans-serif;
}
h2 { font-family: 'TarzaNar-290711001EmigreWebOnly', Verdana, sans-serif;
}#top .post-title, #top .entry-mini h1.post-title {
font-weight: normal !important;
}.main_menu .menu li a strong {
font-weight: normal !important;
}Posted 1 year ago # -
No, didn't take either. Thanks for your patience.
I'm not insightful enough to know, but I think that if we could figure out if Flashlight makes a distinction between Heading 1 and Heading 2, and if so, where – then maybe we're in business. I dare not think how much work Kriesi has put into this fine creation.
There might be a few other things going awry with my page right know (file permissions, stalled updates) so I'm gonna tear it apart right now. We'll get back to this, kay?
Posted 1 year ago # -
Ok, let us know if there's anything you need.
Posted 1 year ago # -
OK, I'm back now. Thank you Chris and Dude.
Unfortunately, none of the kind suggestions you have given me so far have worked. This might be an font issue rather than (the rest of the) CSS, but I haven't lost hope yet. (I still haven't seen Tarzana Regular on the page, so it might be my @font-face rule (above) that's messed up).
I could be wrong, but I think the problem lies in how to... instruct Flashlight to deploy the first font for h1 headings... and the second font for h2? Could that be right?
Because only telling Flashlight "do this bold, and that regular" would require the same font in two accompanying variants, rather than the two separate fonts I've got. This is only speculation, but I would love your input.
Posted 1 year ago # -
I mean, it's clear that Flashlight knows how to render headings and paragraphs in different fonts.
My question is if Flashlight can be told to use certain fonts for certain levels of headings -- h1 different from h2. If that is possible, then I can move on to how to make the actual fonts work.
Posted 1 year ago # -
Yes it's possible. You can add use as many fonts as you like. I.e. the code would be:
#top .post-title, #top .entry-mini h1.post-title, h1 { font-family: 'tarzanarbol-290711001EmigreWebOnly', Verdana, sans-serif !important; } h2 { font-family: 'TarzaNar-290711001EmigreWebOnly', Verdana, sans-serif; }Posted 1 year ago # -
Oh! Now we're talking. I will go try.
[...]
Sorry, no. I put back my old @font-face declaration (pasted below), and added your last suggestion. Doing this, I get Tarzana Narrow Bold on all headings. No Tarzana Narrow Regular (the thin variety).
Then, I went into my welcome page and put <h2>, </h2> around the page title. This page is in Mini Content Area layout, so the difference should show up in the little box on the right. It does -- but it's still Tarzana Bold, only smaller type.
So the next question, I guess, would be if my @font-face rule is wrongly written. From what I can tell, I'm still only telling Flashlight to let @font-face replace Cufon headings in general (i.e., no distinction between h1 and h2).
My Quick CSS:
.cufon_headings {
font-family: "tarzanarbol-071211005EmigreWebOnly", Verdana, sans-serif;
}@font-face{
font-family: 'tarzanarbol-071211005EmigreWebOnly';
src: url('wp-content/themes/flashlight/fonts/tarzanarbol-071211005EmigreWebOnly.eot');
src: url('wp-content/themes/flashlight/fonts/tarzanarbol-071211005EmigreWebOnly.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/flashlight/fonts/tarzanarbol-071211005EmigreWebOnly.woff') format('woff');
}@font-face{
font-family: 'tarzanar-071211005EmigreWebOnly';
src: url('wp-content/themes/flashlight/fonts/tarzanar-071211005EmigreWebOnly.eot');
src: url('wp-content/themes/flashlight/fonts/tarzanar-071211005EmigreWebOnly.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/flashlight/fonts/tarzanar-071211005EmigreWebOnly.woff') format('woff');
}#top .post-title, #top .entry-mini h1.post-title, h1 {
font-family: 'tarzanarbol-071211005EmigreWebOnly', Verdana, sans-serif !important;
}h2 { font-family: 'tarzanar-071211005EmigreWebOnly', Verdana, sans-serif; }
_______
As before, the site in question is http://hikki.se/Posted 1 year ago # -
Here's one very nooby idea: Would it be possible to combine the h1, h2 rules with the very first lines of the CSS there?
What I mean is, it was when you gave me the "cufon headings" line that I got my web fonts to work. Could I construct two of those? Sort of like:
.cufon_headings 1 { font-family: "tarzanarbol-071211005EmigreWebOnly", Verdana, sans-serif; } .cufon_headings 2 { font-family: "tarzanar-071211005EmigreWebOnly", Verdana, sans-serif; }I know this can't be correct, but perhaps something is this direction might work? What do you think?
Posted 1 year ago # -
Please sir?
Posted 1 year ago # -
Hey,
sorry for the delay.
Really all you should need to do is include this in your css
h1 { font-family: 'FontForH1', Verdana, sans-serif; } h2 { font-family: 'FontNameForH2', Verdana, sans-serif; }If the font files are declared before these lines with @font-face there shouldn't be any problem replacing them - that is if you've deactivated your Cufon (This is what you want to do - right?)
Posted 1 year ago # -
Thank you for your response, Chris!
Yes, It seems the code I use (pasted a few posts earlier here) replaces the Cufonery. Before that, I selected "No custom fonts" in Flashlight Theme Options, of course.
I think you are at least partly right. But with the code of my Quick CSS, as it looks right now (see below), h2 is only rendered as a smaller h1. I think of two possibilites: either my code contains conflicting declarations, or Flashlight needs more finesse to deliver h2's in a different font.
If you would take a look below and find where I've gone wrong, I would be immensely grateful.
My css:
.sidebar .widgettitle{font-size:13px;}.cufon_headings {
font-family: "tarzanarbol-071211005EmigreWebOnly", Verdana, sans-serif;
}@font-face{
font-family: 'tarzanarbol-071211005EmigreWebOnly';
src: url('wp-content/themes/flashlight/fonts/tarzanarbol-071211005EmigreWebOnly.eot');
src: url('wp-content/themes/flashlight/fonts/tarzanarbol-071211005EmigreWebOnly.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/flashlight/fonts/tarzanarbol-071211005EmigreWebOnly.woff') format('woff');
}@font-face{
font-family: 'tarzanar-071211005EmigreWebOnly';
src: url('wp-content/themes/flashlight/fonts/tarzanar-071211005EmigreWebOnly.eot');
src: url('wp-content/themes/flashlight/fonts/tarzanar-071211005EmigreWebOnly.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/flashlight/fonts/tarzanar-071211005EmigreWebOnly.woff') format('woff');
}#top .post-title, #top .entry-mini h1.post-title, h1 {
font-family: 'tarzanarbol-071211005EmigreWebOnly', Verdana, sans-serif !important;
}h1 { font-family: 'tarzanarbol-071211005EmigreWebOnly', Verdana, sans-serif; }
h2 { font-family: 'tarzanar-071211005EmigreWebOnly', Verdana, sans-serif; }
Posted 1 year ago # -
Please? I suspect the wants and needs of all us users can be overwhelming, so I try my best not to harass you good support people. But I would so love to have one bold, one medium font.
Hope to hear from you sirs. You're doing great work.
Posted 1 year ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
