[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 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.
XO
tessisamess
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.
XO
tessisamess