Forums

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:

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?
1db
 
zoinks replied on at Permalink Reply
Your font-face CSS should look like this:

@font-face {
    font-family: 'MuseoSans500';
    src: url('museosans_500_macroman/MuseoSans_500-webfont.eot');
    src: url('museosans_500_macroman/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('museosans_500_macroman/MuseoSans_500-webfont.woff') format('woff'),
         url('museosans_500_macroman/MuseoSans_500-webfont.ttf') format('truetype'),
         url('museosans_500_macroman/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
    font-weight: normal;
    font-style: normal;
}


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:
<link rel="stylesheet" media="screen" type="text/css" href="<?php  echo $this->getStyleSheet('style.css')?>" />
1db replied on at Permalink Reply
1db
Zoinks--

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" />
zoinks replied on at Permalink Reply
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.
1db replied on at Permalink Reply
1db
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?
zoinks replied on at Permalink Reply
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.
zoinks replied on at Permalink Reply
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.
1db replied on at Permalink Reply
1db
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.
zoinks replied on at Permalink Reply
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.
1db replied on at Permalink Reply
1db
That's okay...neither do I. Franz? Oh, Franz?
12345j replied on at Permalink Best Answer Reply
12345j
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.
1db replied on at Permalink Reply
1db
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.
TheRealSean replied on at Permalink Reply
TheRealSean
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?
1db replied on at Permalink Reply
1db
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.
TheRealSean replied on at Permalink Reply
TheRealSean
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)
TheRealSean replied on at Permalink Reply
TheRealSean
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
1db replied on at Permalink Reply
1db
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 
$this->getThemePath
to call the CSS. Then, I made sure to use single quotes in the CSS, like this:

@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.
zoinks replied on at Permalink Reply
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.