[SOLVED] Custom font won't display in Firefox

[tessisamess]

I'm coding my first layout (though it's not my first time working with LJ layout codes) and everything's basically going fine. The only problem I've come across is that Firefox refuses to show the custom font I'm using as my accent font (header nav, h tags, journal entry title, and footer nav). I've tried everything I can think of, as well as

Comments

[yourxpridex]

http://www.fontsquirrel.com/fontface/generator

I love this site for generating cross browser syntax. Not only does it convert the fonts for you, but it also generates the CSS. I tested the output both locally and on my own server and it works in every major browser.

However the major issue is simple: Firefox does not allow cross site font web embedding. This website has a potential work around you may want to play with, but I haven't had a chance to test them out.

Best of luck!

[tessisamess]

You know, that's the weirdest part! I hadn't mentioned it in this post, because I only noticed it very soon after posting, and neglected to update the post mentioning it. I had seen in my Googling that Firefox doesn't allow cross-domain fonts and I thought, oh, well there's my problem! But then I remembered: I have a custom font on another layout I use in one of my comms, also hosted on fancyandthefury.

So I opened up Firefox (I don't actually use Firefox, so I'd never noticed) and checked it. The font showed up. [Insert sighs of "what the shit is going on" here.] Even more confusing is the fact that I wrote that @font-face code too and, when the two are compared, the only variation is the font name itself (and the hosting URLs, of course).

Anyways, I got to rambling; my apologies. I'll try FontSquirrel and see if that fixes my problem. I'd seen the site in my Google journey, but I figured it would just generate code I knew how to write and passed it by. Thank you! ♥

[yourxpridex]

Browsers are fickle things, that's for damn sure. I've had things work for weeks and then suddenly decide to no longer work, it's beyond frustrating. I would try the font squirrel site, tell it you want to define your own settings and try the base 64 encoding workaround. Let me know if you have any luck. I'm curious about the results.

[tessisamess]

I've got my FontSquirrel kit for the needed font, but I'm gonna be honest here: I'm not entirely sure what to do with it. I'm sure the answer is totally right in front of me, and I really feel like I'm asking a stupid question, which makes this twice as embarrassing to ask lol.

Edit: I did a bit of searching and came out with this as my new code:
@font-face

[yourxpridex]

I'm assuming you used the base 64 encoding workaround

[yourxpridex]

And still too long.... going to upload it somewhere quickly and I'll get back to you, heh.

[yourxpridex]

Finally...

font face css

There's the CSS you'll need to use to get everything to behave in Firefox. I'm honestly not sure if there's a css size limit on livejournal, if there is you may need to host the css on your server.

...are firefox users really worth all this trouble, heh? :P

[tessisamess]

...are firefox users really worth all this trouble, heh? :P

You don't know how many times I've found myself thinking that the past day or so. Seriously. But I plan on posting this code so anyone who likes it can go ahead and use it, so I'm trying really hard to make sure it looks good everywhere since it's not just for me. Okay, I'm gonna give this a whirl and then come edit the comment with an update.

Thank you so much for all of your help with this. You're just awesome for taking the time to work this out with me and I really appreciate it.

Completely unrelated: Ugh, your journal? Is so freaking pretty. I love it.

Edit: Okay, so I tried the code you gave me (very similar to what I tried before the second code I posted above) and the layout went ten different kinds of wonky, which is what it did when I tried it with the stylesheet FontSquirrel gave me before you uploaded the code. If it's working fine for you, I have to assume I'm the problem here

[yourxpridex]

Hey, I'm looking into this now and will edit when I come up with something. :)

[tessisamess]

You rock, bro. I can't thank you enough. I mean, if this shit gets sorted I'll know how to do it and I won't have the damn problem again lol. And I really like knowing how to do shit. Knowing how to do shit... comes in handy lmao.

I added you on AIM. It was on your profile, so I assumed you wouldn't mind; if the assumption is wrong though I'll totally understand.

[yourxpridex]

So realized you must have a custom layer in place so those who are logged in see a different layout than those who are signed out. Took me for freaking ever to figure that out, lol. I was really perplexed by how different it all looked between Chrome and Firefox. It's Saturday, I'm allow to be slow, right

[tessisamess]

Oh, we have unlimited bandwidth on the plan that site is hosted with, so I wasn't too worried about that.

It's just. The weirdest fucking thing, you know? And I just saw another layout that has a custom font used in places, so I looked at it on Firefox and it displayed perfectly. I looked at the code, but I didn't see anything very different from my original one, or that one font I have on a different LJ that does display on Firefox. I even tried replacing SunshineinmySoul with a different font before posting here, with no luck (obviously).

(The layout I stumbled across is here, from user complications-g. Her font "Lobster Two" displayed flawlessly on both Chrome and Firefox for me.)

Have a nice lunch!

[yourxpridex]

So I poked around in her CSS, and saw that she's relying on Google to serve up the font to FF. Quite brilliant on her part. The HUGE downside is that Google only supports 257 fonts and SunshineinmySoul is not one of those fonts.

Check out Google Web Fonts to see what they support.

adamlay - is where I tested using Google to handle the font. The font I picked...leaves a lot to be desired, unfortunately but you get the idea.

[tessisamess]

Ohhhh, that could definitely work. I'm sure out of 257 fonts they'll have something I like.

I'm gonna go ahead and use Cedarville Cursive (I'm familiar with the font maker's other fonts, so), but if I don't like it I have two backups picked. Buuut I'm gonna do it after I wake up enough to do more than durr hurr at my screen. Will update (probably needing hand-holding lmao) one I do!

Edit: Aaaalrighty. Over an hour later (I think) and still no luck.

Edit 2: Welp, disregard the last edit, I guess. Firefox has suddenly decided it likes my Google-served font just fine. Maybe it was my cache this time around.

[yourxpridex]

Woot! Glad you were able to get it all worked out. :) As another side note, there are a few other services that act like Google Font (with tons more fonts) however you have to pay for them, which is very :(

The sad thing is, it doesn't seem like this will ever change. Firefox doesn't allow this for security reason so bleg. Oh, and IE9 decided to move that route as well. As we move closer and closer to widespread cloud uptake, I'm really confused by this stance...but whatever.

[tessisamess]

Yeah, I saw some of those font sites, noticed the price tag, and was like "Well screw you too." For non-commercial stuff like LJ layouts it's just not worth the money. I have a kid and three stupid cats to feed, you know! *shakesfist*

I updated the post with how we (that is you) solved this with a step-by-step sort-of-guide, so hopefully that'll help anyone in the future who has the same problem. If you notice anything I forgot I'll add it in.

Anyway, yeah. Seriously, thank you for all the help. I never would've figured this out without it. Okay, so I might have, but it would have probably taken a lot longer lol.