An odd problem with @font-face and stylesheet location
Permalink
I'm having problems getting embedded fonts to work properly...they display in WebKit browsers, but not anything else. In Firefox, for instance, this:
will display as Arial.
I've checked everything about the CSS, and I'm convinced there's nothing wrong with it. But the problem was intractable, so I logged onto Font Squirrel and sought some insight. The answer seems to be this: Firefox will not accept absolute urls. This is what Dan at Font Squirrel was seeing:
But THIS is the actual CSS in my stylesheet:
Here's the problem: I'm uploading my stylesheet to:
But what Dan is seeing, based on Safari's Web Inspector, is this:
The upshot of all this is that Firefox is seeing absolute URLs and won't accept them, so the font is defaulting to Arial. But WHY is the stylesheet being pulled from monroe/index.php/tools/css/themes/Monroe instead of simply from monroe/themes/Monroe? And if Concrete is creating a new stylesheet on the fly, why is it inserting absolute URLs?
font: normal 50px TitilliumText22LThin, Arial, Helvetica, sans-serif;
will display as Arial.
I've checked everything about the CSS, and I'm convinced there's nothing wrong with it. But the problem was intractable, so I logged onto Font Squirrel and sought some insight. The answer seems to be this: Firefox will not accept absolute urls. This is what Dan at Font Squirrel was seeing:
src: url(http://www.1stdesignbrigade.com/monroe/themes/Monroe/'fonts/TitilliumText22L004-webfont.eot');
But THIS is the actual CSS in my stylesheet:
src: url(fonts/TitilliumText22L004-webfont.eot);
Here's the problem: I'm uploading my stylesheet to:
http://www.1stdesignbrigade.com/monroe/themes/Monroe/style.css.
But what Dan is seeing, based on Safari's Web Inspector, is this:
http://www.1stdesignbrigade.com/monroe/index.php/tools/css/themes/Monroe/style.css
The upshot of all this is that Firefox is seeing absolute URLs and won't accept them, so the font is defaulting to Arial. But WHY is the stylesheet being pulled from monroe/index.php/tools/css/themes/Monroe instead of simply from monroe/themes/Monroe? And if Concrete is creating a new stylesheet on the fly, why is it inserting absolute URLs?
Zoinks--
I tried your code and got this:
This is what I was using, which works:
I tried your code and got this:
Parse error: syntax error, unexpected T_VARIABLE in /home/stdesign/public_html/monroe/themes/Monroe/elements/header.php on line 18
This is what I was using, which works:
<link rel="stylesheet" type="text/css" href="<?=$this->getThemePath()?>/style.css" />
So, line 18 is just that line that links the stylesheet?
Honestly, the way you link your CSS with $getThemePath is actually how I do it, too. I just have in my notes that the way we do it is okay, but not the official way to link stylesheets. If you look at the default templates that come with C5, you'll see they use this linking method.
Honestly, the way you link your CSS with $getThemePath is actually how I do it, too. I just have in my notes that the way we do it is okay, but not the official way to link stylesheets. If you look at the default templates that come with C5, you'll see they use this linking method.
I did it again, copying from one of the default themes, and this time it loaded properly. Don't know why.
But that still doesn't solve the mystery (mystery to me, anyway), which is that the path to the stylesheet includes "index.php/tools/css." I've looked at other sites I designed, which thankfully don't have @font-face issues, and they're the same: there's a second stylesheet, which is apparently what Safari is finding, that is feeding absolute URLs. What gives?
But that still doesn't solve the mystery (mystery to me, anyway), which is that the path to the stylesheet includes "index.php/tools/css." I've looked at other sites I designed, which thankfully don't have @font-face issues, and they're the same: there's a second stylesheet, which is apparently what Safari is finding, that is feeding absolute URLs. What gives?
Oh, are you looking through Safari's "Inspect Element?" I have noticed that Safari loads its own styles wherever it can't find what it needs. So, probably (maybe?) the Safari version of the Font-face font isn't loading... did you check your CSS to see if it looks like the sample I gave above? This is the most reliable font-case code I have found and I pretty much use this format all the time no matter what.
Also, make sure you clear your cache in Sitewide Settings (or maybe just disable it while you test) and then obviously reset Safari and clear its cache, too.
The problem isn't with Safari--it's with Firefox. If you go tohttp://www.1stdesignbrigade.com/monroe/index.php/tools/css/themes/M... you'll see the CSS I'm talking about. It's not just a representation within Safari's Inspector--it's an actual file, accessible online, and it's the one that's screwing up Firefox's implementation.
My question is: where is this file coming from, and why? It's not the file that I uploaded, and it's an entirely different path. It's something that Concrete is doing, and I have no idea why, or whether or not I can prevent it.
My question is: where is this file coming from, and why? It's not the file that I uploaded, and it's an entirely different path. It's something that Concrete is doing, and I have no idea why, or whether or not I can prevent it.
that is strange. hopefully I at least helped bump the thread so someone who knows better might see it. I don't know what that's about.
That's okay...neither do I. Franz? Oh, Franz?
The tools file is loaded when you load stylesheets through $this->getStylesheet, while $this->getThemePath will simply output the relative url. This is so that the modifications to a stylesheet are processed by c5, which is allowed by $this->getStylesheet and not by $this->getThemePath. So if you just create a new css file purely for fonts and load it with $this->getThemePath you shouldn't have an issue.
J, that worked, so far as the stylesheet is concerned. I'm now getting font declarations without absolute URLs. However, it's still not working in Firefox, so now it's back to Font Squirrel.
Thanks for the input.
Thanks for the input.
How does this site look for your in Firefox?
http://www.natural-talents.co.uk/...
That uses font face, with Titillium.
I notice too that some of the font links are relative and some are absolute, I don't have the ftp details here but will check at work tomorrow see which I use?
http://www.natural-talents.co.uk/...
That uses font face, with Titillium.
I notice too that some of the font links are relative and some are absolute, I don't have the ftp details here but will check at work tomorrow see which I use?
Sean, I don't see the Titillium. But I used the web inspector in Safari, just as with my site, and your stylesheet is also apparently loading through getStylesheet instead of getThemePath.
If I find an answer for this through Font Squirrel, I'll post it here, since you can probably make use of it too. In the meantime, try J's fix, above.
If I find an answer for this through Font Squirrel, I'll post it here, since you can probably make use of it too. In the meantime, try J's fix, above.
Maybe this is a Firefox version problem?, I'm still running 3.x and the Titillium works for me, on your site too.
(I know its on about 8 now but I have it for bug testing)
(I know its on about 8 now but I have it for bug testing)
I have just checked on Firefox 8 and it seems to work there to, for us.
Are you using a Mac or PC?, we are running on PC
Are you using a Mac or PC?, we are running on PC
Sean, I got my site to work, so you may have seen it after the fix. What I did was first to separate my typography in a second CSS file, as J suggested above, and use to call the CSS. Then, I made sure to use single quotes in the CSS, like this:
Safari isn't picky, but with Firefox you apparently have to enclose any value in parentheses within quotes.
Oddly enough, it's still not working in Opera.
$this->getThemePath
@font-face { font-family: 'TitilliumText22LThin'; src: url('fonts/TitilliumText22L001-webfont.eot'); src: url('fonts/TitilliumText22L001-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/TitilliumText22L001-webfont.woff') format('woff'), url('fonts/TitilliumText22L001-webfont.ttf') format('truetype'), url('fonts/TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg'); font-weight: normal; font-style: normal; }
Safari isn't picky, but with Firefox you apparently have to enclose any value in parentheses within quotes.
Oddly enough, it's still not working in Opera.
Sheesh. :-(
You know, I don't even bother with Opera. Probably should, but I figure if you're not on IE, Firefox or Safari, you are used to webpages looking messed up. Plus, its only like 5% of the total web audience, less than .1% will probably ever visit my sites.
You know, I don't even bother with Opera. Probably should, but I figure if you're not on IE, Firefox or Safari, you are used to webpages looking messed up. Plus, its only like 5% of the total web audience, less than .1% will probably ever visit my sites.
Obviously, with your own preferred font. I export this through FontSquirrel and this formatting always works perfectly.
And you should link your stylesheet like this: