[SOLVED] Custom font won't display in Firefox
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
( Read more... )
Edit: I did a bit of searching and came out with this as my new code:
@font-face {
font-family: SunshineinmySoul;
src: url('http://fancyandthefury.net/files/SunshineinmySoul.eot') format('eot');
src: local(SunshineinmySoul), url('http://fancyandthefury.net/files/SunshineinmySoul.ttf') format('opentype');
src: local(SunshineinmySoul), url('http://fancyandthefury.net/files/sunshineinmysoul.svg#SunshineInMySoulRegular') format('svg');
font-weight: normal;
font-style: normal;
}
It definitely took the SVG, as the font got much smoother on the journal when I viewed it in Chrome, however Firefox still didn't want any of my shit so either I'm doing something wrong or it didn't work. It's entirely possible that I fucked some shit up.
As an aside, a friend tested it on her Firefox browser and said my background image had decided to go someplace else, and she and another friend both said the custom font was nowhere to be seen. And when I first tested it in Chrome it messed with my header nav a bit (easily fixable).
So I guess what I'm saying is, unless I screwed up (very possible), this may be a lost cause. Le sigh.
Reply
The kit should have generated the .eog and .svg files you already have, so if you don't feel like replacing them, there shouldn't be any need to.
If you open up the stylesheet.css you'll see that it also generated the css for you, although it's pretty nasty looking. I would do a find and replace for SunshineInMySoulRegular to SunshineinmySoul, that way you won't have to update the rest of your css to match the new font-face. Replace the src for the .eot with the right url.
Skip the long babble of random letters and numbers (this is where the font is embedded into the css instead of calling to a remote domain...and the reason why this fix works in Firefox). You can drop the font-weight: and font-style: definitions if you want and if you don't feel like including a .svg file, drop that line as well (just replace the , before it with a ; instead to tell the browser that's the last item in the list).
Here's what I came up with (tested using your urls, I hope you don't mind) and it appears to be working: (on the next comment because it's so damn long)
Reply
Reply
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
Reply
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. :|
And I just realized I never actually posted a link to the live test of this layout. That's here. It looks perfectly fine in Chrome, Safari and Opera, like I said.
Reply
Reply
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.
Reply
Anyway, I see what you mean by the layout going wonky now and it looks like it's a limitation of LJ (someone correct me if I'm wrong) and not necessarily the code or the approach as it seems to work on sites outside of LJ just fine.
Kind of a bummer really. :/ I'm going to keep looking into this, but right now it kind of looks like it's going to fall into the "shit I could not solve" category. Stupid Firefox, people should just switch to Chrome already, heh.
Sorry I wasn't much of a help. Maybe someone else will come along with a better solution.
As for the AIM... I was like WTF, I have AIM? I guess I do. :P I don't mind if you add me at all although the odds of you seeing me on there is pretty slim to none.
OH! And thanks for your lovely comment on my LJ layout. It was a weekend project a few months back where I basically harassed the hell out of the livejournal layers. The colors I owe to http://www.colourlovers.com/ because yeah, I can't match colors to save my life.
Annnnnndddddd another side note concerning distributing this layout: when it comes to hosting fonts, space really isn't the problem, bandwidth is. I would be EXTREMELY mindful of this when it comes time to share. Watch your stats carefully the first few days to make sure it's not going to bring down your site. If it look like it might (meaning your bandwidth skyrockets), you'll need to find an alternative font host. :)
Ok, enough lecturing. I'm going to have lunch and will probably pick at this a little bit later because I'm a geeky loser who has nothing else to do on a Saturday. ;)
Reply
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!
Reply
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.
Reply
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.
Reply
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.
Reply
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.
Reply
Reply
Leave a comment