Tagged: , , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #8104

    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?

    #60322

    Hey,

    you could use “font-weight: bold” for h1 headings. Try to add following code to css/custom.css:

    #top h1.post-title, h1 {
    font-weight: bold;
    }

    #60323

    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?

    #60324

    Try following css code:

    #top .post-title, #top .entry-mini h1.post-title {
    font-weight: normal !important;
    }

    .main_menu .menu li a strong {
    font-weight: normal !important;
    }

    #60325

    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;

    }

    #60326

    Sorry. I just noted that we used “normal” for both elements. Please set the font-weight for .main_menu .menu li a strong to “bold”.

    #60327

    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?

    #60328

    Ok, let us know if there’s anything you need.

    #60329

    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.

    #60330

    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.

    #60331

    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; }

    #60332

    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/

    #60333

    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?

    #60334

    Please sir?

    #60335

    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?)

    #60336

    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; }

    #60337

    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.

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Different fonts for h1, h2?’ is closed to new replies.