Support Forum - Topic: Different fonts for h1, h2?

Support Forum - Topic: Different fonts for h1, h2? http://www.kriesi.at/support/topic/different-fonts-for-h1-h2 Support Forum - Topic: Different fonts for h1, h2? en-US Mon, 20 May 2013 00:41:15 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-39831 Thu, 02 Feb 2012 14:30:51 +0000 perenoksson 39831@http://www.kriesi.at/support/ 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. perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-38683 Wed, 25 Jan 2012 15:35:36 +0000 perenoksson 38683@http://www.kriesi.at/support/ 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: <code> .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; } </code> Chris Beard on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-38629 Wed, 25 Jan 2012 05:38:04 +0000 Chris Beard 38629@http://www.kriesi.at/support/ Hey, sorry for the delay. Really all you should need to do is include this in your css <pre><code>h1 { font-family: 'FontForH1', Verdana, sans-serif; } h2 { font-family: 'FontNameForH2', Verdana, sans-serif; }</code></pre> 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?) perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-38469 Mon, 23 Jan 2012 12:25:07 +0000 perenoksson 38469@http://www.kriesi.at/support/ Please sir? perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-38247 Fri, 20 Jan 2012 12:28:55 +0000 perenoksson 38247@http://www.kriesi.at/support/ 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: <pre><code>.cufon_headings 1 { font-family: "tarzanarbol-071211005EmigreWebOnly", Verdana, sans-serif; } .cufon_headings 2 { font-family: "tarzanar-071211005EmigreWebOnly", Verdana, sans-serif; }</code></pre> I know this can't be correct, but perhaps something is this direction might work? What do you think? perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-38142 Thu, 19 Jan 2012 12:28:09 +0000 perenoksson 38142@http://www.kriesi.at/support/ 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: <code> .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; } </code> _______ As before, the site in question is <a href="http://hikki.se/" rel="nofollow">http://hikki.se/</a> Dude on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-38087 Thu, 19 Jan 2012 07:28:31 +0000 Dude 38087@http://www.kriesi.at/support/ Yes it's possible. You can add use as many fonts as you like. I.e. the code would be: <pre><code>#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; }</code></pre> perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-38025 Wed, 18 Jan 2012 11:21:57 +0000 perenoksson 38025@http://www.kriesi.at/support/ 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. perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37820 Mon, 16 Jan 2012 15:08:18 +0000 perenoksson 37820@http://www.kriesi.at/support/ 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. Chris Beard on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37670 Sun, 15 Jan 2012 03:01:56 +0000 Chris Beard 37670@http://www.kriesi.at/support/ Ok, let us know if there's anything you need. perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37557 Fri, 13 Jan 2012 09:38:41 +0000 perenoksson 37557@http://www.kriesi.at/support/ 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? Dude on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37323 Wed, 11 Jan 2012 14:05:50 +0000 Dude 37323@http://www.kriesi.at/support/ 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". perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37319 Wed, 11 Jan 2012 13:59:35 +0000 perenoksson 37319@http://www.kriesi.at/support/ 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; } Dude on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37299 Wed, 11 Jan 2012 11:59:08 +0000 Dude 37299@http://www.kriesi.at/support/ Try following css code: <pre><code>#top .post-title, #top .entry-mini h1.post-title { font-weight: normal !important; } .main_menu .menu li a strong { font-weight: normal !important; }</code></pre> perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37297 Wed, 11 Jan 2012 11:29:04 +0000 perenoksson 37297@http://www.kriesi.at/support/ Thanks Dude, I'll try it. The page, by the way, is <a href="http://www.hikki.se/" rel="nofollow">http://www.hikki.se/</a> [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? Dude on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37198 Tue, 10 Jan 2012 21:39:59 +0000 Dude 37198@http://www.kriesi.at/support/ Hey, you could use "font-weight: bold" for h1 headings. Try to add following code to css/custom.css: <pre><code>#top h1.post-title, h1 { font-weight: bold; }</code></pre> perenoksson on "Different fonts for h1, h2?" http://www.kriesi.at/support/topic/different-fonts-for-h1-h2#post-37151 Tue, 10 Jan 2012 10:59:38 +0000 perenoksson 37151@http://www.kriesi.at/support/ 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?