(SOLVED!) Problem with webfonts.

[ex_beautified302]

I've tried nearly everything I can think but it's just a no-go. The font only shows up on Chrome. Firefox and IE won't render it. I have the fonts in the exact folder that the @font-face CSS file is stored. Here's my CSS file, if it helps:

@font-face { font-family: 'adorable_ladyregular'; src: url('adorablelady.eot'); src: url('adorablelady.eot?#iefix') format('embedded-opentype'), url('adorablelady.woff') format('woff'), url('adorablelady.ttf') format('truetype'), url('adorablelady.svg#adorable_ladyregular') format('svg'); font-weight: normal; font-style: normal; } #title { font-weight: normal; font-family: 'adorable_ladyregular'; }

And the journal I'm trying to test it on is the one I'm currently posting from.

Edit - Solved! How I got it to work:

Looking at this entry and going to thoitaxh's journal, I saw they were able to do it through Dropbox. I tried using dropbox but it didn't work until I realized they were linking to it with the url that hitting "Download" gives you instead of the "Share" url. (I wasn't very familiar with Dropbox.) Then you have to remove everything in the url after the ".ttf" or ".eot" part. And now I got everything working fine, so I assume Dropbox has the .htaccess file to allow cross-domain embeds.

Thanks to everyone who helped me out.

Comments

[marahmarie]

You don't seem to have any fonts attached to your CSS though to make them apply. And I'm thinking you would need to create those rules, that you would need to specify, for instance, that the body or .entry-content use the font(s) you've selected... and I'm saying that only because when I checked your style sheet just now all I saw was @font-face CSS with no other styling specified at all.

ETA; OK, I had to scroll down a bit because my window was sized funny to see you do have a font applied to #title and it is working. That's in Firefox 26 on XP, if that helps you any...

[ex_beautified302]

So you're seeing it? It should look like a gothic sort of font. I tested this on Firefox 26 and 27 which didn't make a difference on my end. :(

I see some errors in the console on the page... "bad URI or cross-site access not allowed" But the files and the CSS are on the same website??? No clue.

[syntheid]

Firefox has some restrictions about displaying files, but might require DW to fix their .htaccess? Link for explanation. Not totally sure, though.

What's weird is my embedded fonts from Google are working in Firefox, so I'm not sure what's different there. Looking into it a bit more but maybe someone else will have a better explanation for you.

[ex_beautified302]

Yeah, that's what I don't get. Because I've used Google fonts quite frequently and didn't have much issue with them.

[momijizukamori]

It's actually not a DW-side thing, it's an other-server side thing! Mozilla blocks cross-domain font-embeds so your hosting side has to say to Firefox 'it's okay to embed these files other places!' by putting that stuff in .htaccess

Google already has their servers set up to say 'it's okay to embed these elsewhere' which is why they work without a problem.

[ex_beautified302]

Thanks a ton for this information—it kept me from going on more wild goose hunts with the codes and fonts I was using! I did figure out a way for me to do it using a different host and I'll make an edit about it in the post.

[momijizukamori]

You're welcome - I ran into the problem when I was working on some layouts last year :)

[marahmarie]

But the files and the CSS are on the same website???

Are they on DW? I actually can't tell by what I'm seeing in Web Dev but your page source tells me they're not. If that's the case, perhaps put the style rules into DW's custom CSS box and see if that helps?

As far as me seeing your custom font, I have no idea what it looks like, so I was able to tell it's there only by removing the style rule for it from the CSS you're using. Once I did that the font changed, telling me the one you selected must indeed be showing up.

Sorry I can't help you much more than that... :(

Wait, yes I can, well maybe...is this the font you're supposed to see? http://imgur.com/ZLYTP0M

ETA...OK, it isn't...turns out I removed all the style rules to get the font to change. All that did was change the title text from normal to bold, it didn't actually change the font at all, so never mind, my mistake entirely. So short of what mythos said (fiddling with the style rules to get them to work somehow) I don't see another good answer - and just fwiw, you should be able to host your style rules/the style sheet itself off-site like you currently are and have them work just fine - you shouldn't need to separate the rules by what they control or use DW's custom CSS box simply to get them to work, so you can safely disregard my previous idea on that.

[ex_beautified302]

The font file and the stylesheet are both being hosted under my webs.com account.

The font is supposed to look like this, for reference: http://i59.tinypic.com/34nmzpt.jpg

It's okay! I can see why you were mistaken.

Not certain on what you mean by this:
you shouldn't need to separate the rules by what they control or use DW's custom CSS box simply to get them to work, so you can safely disregard my previous idea on that

I appreciate you looking into this, even if we can't figure out what it is that's making them mess up.

[marahmarie]

Well, my initial and obviously mistaken thought on it was, "Well, if we split up the files so the fonts are hosted on webs.com and the rules that style those fonts are hosted on DW, maybe it'll work". That was...I just don't even know what I was thinking. It should all work regardless of what's hosted where.