Log in

[solved] title= [SOLVED] Custom font won't display in Firefox
October 1st, 2011 @ 03:23 am
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 Googled it to death (then Googled it some more). I've searched this comm as well.

The @font-face CSS is sticking in Chrome, Safari and Opera. Firefox seems to be my only no-go. So I figured I'd check here with before finally marking it as a loss.

The custom font code in my CSS:
@font-face {
font-family: SunshineinmySoul;
src: url('http://fancyandthefury.net/files/SunshineinmySoul.eot') format('eot');
src: url('http://fancyandthefury.net/files/SunshineinmySoul.woff') format('woff');
src: local(SunshineinmySoul), url('http://fancyandthefury.net/files/SunshineinmySoul.ttf') format('opentype');

Sidenote (doesn't really matter): The hosting I'm using for the font is just a site I run and pay for. It's got unlimited storage, but does anyone know of a better (safe) place to host the font files so I don't have to keep the fonts in with the site files? It wouldn't even be an issue, except that the site hosts a lot of member-posted content and I feel kind of awkward using it to host fonts for personal projects lol.

So no one in the future who has this same problem has to dig through the thread below, I'll post a breakdown of the fix here. It's not ideal, since you can't pick any font available online, rather only fonts on Google Web Fonts, but it's (as far as we can tell) the only way to get a custom font to work in Firefox. First and foremost, the biggest thanks in the world goes to yourxpridex for going the extra mile to help me solve this.

The Problem: Firefox doesn't allow cross-domain font hosting. Meaning, since the font source URLs weren't LJ based, Firefox said hell to the no. I've seen cross-domain fonts work before, as stated in the comment thread, but it's not consistent and, therefore, unreliable if you want cross-browser support for custom fonts in your layout.

The Fix: Some (or a lot) of you may have seen custom fonts in layouts you've used before. Most, if not all, of them probably had a long Google-based URL filled with gibberish and ending with a font file extension (only .WOFF from what I've seen). So what does that mean? They're using a font served up by Google Web Fonts, which bypasses the 'no cross-domain custom fonts' on Firefox.

My New Code:
@font-face {
font-family: Cedarville Cursive;
font-style: normal;
font-weight: 400;
src: local('Cedarville Cursive'), local('Cedarville-Cursive'), url('http://themes.googleusercontent.com/static/fonts/cedarvillecursive/v1/cuCe6HrkcqrWTWTUE7dw-5zpMnghKP_wiJrQSyqob5U.woff') format('woff'), url('http://fancyandthefury.net/files/cedarville-cursive.svg#cedarvillecursive') format('svg'), url('http://fancyandthefury.net/files/cedarville-cursive.eot');

As you can see, I did have to go with a different font but, in my case, that's okay and is a workable trade-off to have cross-browser support.

Sidenote: Above, you can see that I've still got alternate formats of Cedarville Cursive uploaded to my offsite host. The .EOT file is only to make a custom font register with older versions of IE (the current version is IE9). If you don't have an .EOT version of your font, older versions of IE will load either a default or a secondary font, depending on if you have one specified. You can convert .TTF files to .EOT files here. If the site gives you an error page, it's because there were spaces in your .TTF's file name, so take those out if there are any.

The How To: When you go to Google Web Fonts to get a custom font, it's going to give you tons of stuff after picking one. Unless you're working on something that isn't LJ-based (your own site), most of it will be generally stuff you don't need for writing a layout code to paste into the custom CSS area.

Here's What You're Looking For:
Once you pick your font (I'm using the one I picked for this impromptu tutorial), you're going to get a page starting with this:

What you're really looking for is the third step (scroll down):

The two things to note here are that I am in the @import tab, and that the URL they give doesn't look anything like what we see in Google served font URLs in custom layouts. Take the outlined URL, open a new tab, and stick that in the address bar. You're going to get a page with just this:

@media screen {
@font-face {
font-family: 'Cedarville Cursive';
font-style: normal;
font-weight: normal;
src: local('Cedarville Cursive'), local('Cedarville-Cursive'), url('http://themes.googleusercontent.com/static/fonts/cedarvillecursive/v1/cuCe6HrkcqrWTWTUE7dw-5zpMnghKP_wiJrQSyqob5U.woff') format('woff');

And there's the URL you need in the code! Obviously, you can just use this block, but if you want to add an .EOT for support of older IE browsers, or want .TTFs and/or .SVGs as well, you need to remember to add in the source URLs. This should fix the Firefox problem for Livejournal layouts using custom fonts, and I really hope this helps. If at first it seems like the code didn't help, clear your Firefox cache and check again. I had that problem, but after clearing it everything showed up as it should. Again, thank you, yourxpridex, for making this all come together.


( Post a new comment )
yourxpridex on October 1st, 2011 04:45 pm (UTC)

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!
Tess: zombies - shauntessisamess on October 1st, 2011 04:54 pm (UTC)
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 on October 1st, 2011 05:06 pm (UTC)
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.

Edited at 2011-10-01 05:07 pm (UTC)
Tesstessisamess on October 1st, 2011 05:11 pm (UTC)
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 {
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.

Edited at 2011-10-01 05:54 pm (UTC)
yourxpridex on October 1st, 2011 06:02 pm (UTC)
I'm assuming you used the base 64 encoding workaround.

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)

yourxpridex on October 1st, 2011 06:05 pm (UTC)
And still too long.... going to upload it somewhere quickly and I'll get back to you, heh.
yourxpridex on October 1st, 2011 06:09 pm (UTC)

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

Edited at 2011-10-01 06:09 pm (UTC)
Tesstessisamess on October 1st, 2011 06:14 pm (UTC)
...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. :|

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.

Edited at 2011-10-01 06:27 pm (UTC)
yourxpridex on October 1st, 2011 06:38 pm (UTC)
Hey, I'm looking into this now and will edit when I come up with something. :)
Tesstessisamess on October 1st, 2011 06:41 pm (UTC)
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 on October 1st, 2011 07:17 pm (UTC)
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?

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. ;)
Tesstessisamess on October 1st, 2011 07:38 pm (UTC)
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!

Edited at 2011-10-01 07:39 pm (UTC)
yourxpridex on October 1st, 2011 08:47 pm (UTC)
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.
Tess: pwph - peewee - =Dtessisamess on October 2nd, 2011 05:45 am (UTC)
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.

Edited at 2011-10-02 03:12 pm (UTC)
yourxpridex on October 2nd, 2011 04:23 pm (UTC)
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.
Tess: ea - olive - kisstessisamess on October 2nd, 2011 04:28 pm (UTC)
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.
yourxpridex on October 2nd, 2011 04:40 pm (UTC)
No problem at all. Enjoyed geeking around. ;)
(no subject) - posthoc on October 2nd, 2011 11:21 pm (UTC)
Tesstessisamess on October 2nd, 2011 11:31 pm (UTC)
You know, I may have read something about that, but I did so much Googling when I was originally trying to figure all this crap out that all I really remembered was the 135436 sites telling me that IE only registers .EOT files. My friend had told me @font-face blocks without .EOTs work just fine in IE, so I assume they fixed something as well, but I was reluctant to take that part out because of people running older versions of IE, but I'll definitely add that the newest version handles custom fonts without the .EOT file.

But yeah. I knew I definitely wasn't the only one with the problem and I know, personally, I hate having to dig through threads to find the fix details, so I figured I should probably make it easy for any people who might need it, especially considering there's a lot of trial and error and random side conversations to dig through in the top thread on this post.

I'm really glad you got your fonts working properly! ♥
what a catch.: 0: Streetrocketgirl2 on September 26th, 2012 03:27 am (UTC)
Just stumbled across this, and it answered my question perfectly. Thanks so much!
gaslightgems: Opal VintagePingaslightgems on October 1st, 2012 07:52 pm (UTC)
I have followed the recommended steps and my fonts still not showing up. I'm currently using Chrome and using Google Web fonts and I've cleared out my cache. Here is the code

@media screen {
@font-face {
font-family: 'Jim Nightshade';
font-style: normal;
font-weight: 400;
src: local('Jim Nightshade'), local('JimNightshade-Regular'), url(http://themes.googleusercontent.com/static/fonts/jimnightshade/v1/_n43lYHXVWNgXegdYRIK9IDNNFFxRySv6E1oCJMCE1M.woff) format('woff');

What am I doing wrong?
Tess: other - cameotessisamess on October 1st, 2012 07:56 pm (UTC)
If you added the @media screen {, then you may need to remove it. That's from an old setup the site had when I added the screencaps and instructions, and what it gives you now is all you need. :3 Just don't forget to delete the second curly bracket from the end. So,

@font-face {
font-family: 'Jim Nightshade';
font-style: normal;
font-weight: 400;
src: local('Jim Nightshade'), local('JimNightshade-Regular'), url(http://themes.googleusercontent.com/static/fonts/jimnightshade/v1/_n43lYHXVWNgXegdYRIK9GeI2efzuxEXXKel_Sw2G4E.woff) format('woff');

should be all you need. :)
ancient_immie: Holidays: Halloween/Samhainancient_immie on October 25th, 2012 02:42 pm (UTC)
Thank you so much, it worked! :D
Damien Sullivanmindstalk on November 20th, 2012 03:01 am (UTC)
This worked for me too! Now if only I could get my favored display on as well. Or learn why Google Webfonts works in Firefox and other sources don't.