Flashlight @font-face? « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Flashlight

not a support question

Flashlight @font-face?

20 posts from 3 voices

Started 1 year ago by perenoksson
Latest reply from perenoksson
This topic is not a support question

Tags:

perenoksson
Member

Dear Kriesi support,

1. I hope you can help me find a way. I'm a bit fresh. I want to use two web fonts I bought via the @font-face rule, to replace the Cufon headlines (and possibly some paragraph text as well). I suppose I need to add some bits of code to the CSS file, but which one? There are so many of them in the wordpress folder. Should I find it in the Wordpress css folder, or down in wp-content > themes > flashlight >css?

Would it require further trickery to use my fonts in other instances than just headlines? That is, can I or should I assign different text formats to use my fonts? ... Oh wait, my brain is tilting a little...

2. Is there a way to turn off the ALL CAPS headlines in Flashlight's "Default Layout Big"? I like the size of the big titles, but would love if if they were, you know, Normal Case.

God, this theme is lovely.

Posted 1 year ago #
Chris Beard

Hi,

to start off you'll have to disable cufon fonts by setting your styling to "no custom fonts". You can insert the CSS code to include your fonts in custom.css in your css folder, this file should overwrite other previous settings.

Well, depending on where you bought the fonts and if they require you to upload the actual fonts you have to make sure that wherever you upload these you have to adjust your CSS code so it knows where to look for the fonts.

As for the uppercase issue you can open up your style.css and find
#top .post-title.big_title
Here, you can remove the text-transform line.

Posted 1 year ago #
perenoksson
Member

Hello Chris, thank you for your response.

1. Right, disabling the custom fonts, that works. Next: the only custom.css file I can find is in wp-content > themes > flashlight > css.

At the moment, all that this file says currently is: "/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */" I guess this is where any code I add in the Quick CSS box ends up.

But you are suggesting I put the @font-face declaration into this custom.css file, is that correct?

2. I found the style.css and the text-transform line you suggested, and changed ’uppercase’ to ’none’. That got rid of uppercase in the content areas, but I still have uppercase in the menu (which is a custom menu, as you can do in Flashlight).

I found that style.css contains several instances of "text-transform: uppercase;". Should I change all of them to "none"?

Posted 1 year ago #
Chris Beard

1) Yep, the custom.css file is there to overwrite other settings & apply new ones - you can paste any code in there. So yes, correct.

2) The menu items are set to uppercase under this line in your style.css
.main_menu .menu li a strong
You can set it to none there.

Posted 1 year ago #
perenoksson
Member

Great. It works too. Thank you kind Sir!

Posted 1 year ago #
Dude
Dude

Glad that Chris could help you :)

Posted 1 year ago #
perenoksson
Member

So am I, Dude. I love good support.

Even so, I'm sorry to say I'm still missing something. I've put the @font-face declaration into the custom.css, but nothing's happening on my site (and here I should probably point out that I'm running it local, since my client (friend) want it to launch only when everything is in place).

It's like the rest of the css doesn't pick up on my "use this font family!" command. Hmm.

Edit 1: Tried to open my localhost page in Firefox with Error Console turned on. Wow. Lots of warnings about "Declaration dropped". Wish I was smarter. :´(

Edit 2: Next, I tried to add declarations for h1 and h2 in my custom.css. That only made content headlines use Times intstead of Helvetica Neue. What have I done wrong?

Posted 1 year ago #
Dude
Dude

Did you assign the right font family to the elements? Make sure that the font file path/url is correct.

Posted 1 year ago #
perenoksson
Member

Hey Dude.

Yes, I believe I did. My whole custom.css looks like this:

@font-face{
font-family: 'tarzanarbol-290711001EmigreWebOnly';
src: url('fonts/tarzanarbol-290711001EmigreWebOnly.eot');
src: url('fonts/tarzanarbol-290711001EmigreWebOnly.eot?#iefix') format('embedded-opentype'),
url('fonts/tarzanarbol-290711001EmigreWebOnly.woff') format('woff');
}

But I only see Helvetica. I tried to add some tags, like this:

h1 { font: 48px/1 tarzanarbol-290711001EmigreWebOnly, Verdana, sans-serif;
}
h2 { font: 24px/1 TarzaNar-290711001EmigreWebOnly, Verdana, sans-serif;
}

But that only turned content area headlines to Verdana. Can't say whats wrong. Hopefully you might.

Posted 1 year ago #
Dude
Dude

I'm pretty sure that tarzanarbol-290711001EmigreWebOnly isn't the font family - can you post a link to the website and/or font file on your server

Posted 1 year ago #
perenoksson
Member

Thank you for wanting to help me. At the moment I can't give you a link – my client wants me to work locally until everything is ready for launch. Which really is too bad, because I think I need someone else to look at this.

But the tarzana... files are the only font material I got when I purchased a web font license from Emigre. And they're terribly strict on these licensing matters.

Oh wait – you're saying that the font-family name could be the culprit? I gotta check.

Edit: Nope. I changed the font name, in the font-family line, to "Tarzana Narrow Bold" which is the official name of the font. But no luck.

Posted 1 year ago #
perenoksson
Member

Dear Dude,

In another thread ( http://kriesi.at/support/topic/font-change-1 ), you gave member Glark this advice: "apply your font-face font/webkit font to the .cufon_headings class". That sounds a bit different than the various method I have tried to get my web fonts to run. I don't know enough about CSS, but I've sort of been suspecting that all the Cufons are picking a fight with the @font-face declaration. Could you elaborate a bit on the cufon_heading, kindly?

Also, in another thread ( http://www.kriesi.at/support/topic/font-face-kits-available), davestewart talks about updating the class-style-generator.php file. Could it be related to the troubles I'm having? Or am I just simply wrong?

Posted 1 year ago #
Dude
Dude
Yes - you can use following code:
```
.cufon_headings {
font-family: "tarzanarbol-290711001EmigreWebOnly", Verdana, sans-serif;
}
```
to apply the font to all "cufon marked" headlines.
Posted 1 year ago #
perenoksson
Member

Thank you Dude. Is there a certain place where I should put that? I tried pasting into the Quick CSS box. That only gave me Verdana, BUT it works in the custom menu too, which is a first. Great! So, I tried pasting the @font-face declaration

(double checked the path) into the Quick CSS box, but it's still just Verdana. Oh, wait... Changed the font family name to the weird code name...

Gaah! It works! Nerdgasm!!

Posted 1 year ago #
perenoksson
Member

(phew)

Okay, so the trick is to lead Flashlight to load @font-face through the Cufon headings... or something. Here's what it looks like for me (in the Quick CSS box)

.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');
}

Jaysis. Finally.

Posted 1 year ago #
Chris Beard

So it all works now? Let us know if there's anything else :)

Posted 1 year ago #
perenoksson
Member

It does work. Now I'm gonna try to screw it up by adding the other font variants. And I'm still working locally, so we'll see how many paths I break when I launch the page.

Hopefully, this might help anyone else who wants to use webfonts through @font-face, with the Flashlight theme, on Wordpress. And even more hopefully, Kriesi thinks it works fine and won't alter the code in an update down the road. The awesome guy.

Posted 1 year ago #
perenoksson
Member

Allright, let's ramp it up a bit.

1. Not a real problem, but odd:
Right now, I have the same CSS (for my fonts, seen below) pasted in my custom.css and in the Quick CSS box in the Theme Options. I have found that if I delete it from the Quick CSS frame, the custom css will not load either. Isn't that a bit weird?

2. Ambition:
After succeeding in loading @font-face, I want both my font variants to work, but I can't figure how. I have Tarzana Bold and Medium, and I would like Bold on h1 headings and Medium on h2's. Below is my code, which does not do the trick. As seen earlier, it does load the first (Tarzana Bold, "tarzanarbol") both in the menu and as content heads, but not the second (Tarzana Medium, "TarzaNar"). Can you help me figure out why?

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

Posted 1 year ago #
perenoksson
Member

3. Variation

I tried duplicating the first cufon line and put in the second font, like this:

.cufon_headings {
font-family: "TarzaNar-290711001EmigreWebOnly", Verdana, sans-serif;
}

but that only changed all menu items and content headers to the second font (Tarzana Medium). That's not the solution, then.

Also: how do I, for instance, keep menu titles bold but use medium on certain page headers? Using <h2> in the title box doesn't work.

Posted 1 year ago #
perenoksson
Member

I might have been a bit over-demanding, but at least the site is up and running live now. http://www.hikki.se/

I want to point out that I can under no circumstances recommend building a wordpress site locally – at least if you're not some sort of elite developer. It's really hard to say the secrecy is worth all the terrible hassle. Terrible, I tell you! :D

Notes: I haven't been succeeded in telling Flashlight to use Bold for h1 and Medium for h2 yet. Also, if I delete the css from the Quick CSS box, it seems to go away completely, even though it's also stored in the custom.css file. Still, damn this theme scales beautifully.

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top