[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

[tessisamess]

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! ♥

[rocketgirl2]

Just stumbled across this, and it answered my question perfectly. Thanks so much!

[gaslightgems]

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?

[tessisamess]

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]

Thank you so much, it worked! :D

[mindstalk]

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.