Thread

My @font-face code is fine. It works great with webkit and Opera, but I’m having some strange issues with Firefox and IE.

If I link to the css with

{stylesheet="styles/fontface"}

, the fonts load on the homepage, but not on any of the secondary pages.

If I link to the css the traditional way, without the EE tag, the font loads on the secondary pages, but not on the homepage.

Here’s my @font-face code:

@font-face {
    font-family: 'TitilliumText22LThin';
    src: url('css/TitilliumText22L001-webfont.eot');
    src: local('☺'), url('/css/TitilliumText22L001-webfont.woff') format('woff'), url('/css/TitilliumText22L001-webfont.ttf') format('truetype'), url('css/TitilliumText22L001-webfont.svg#webfontHIqteXlE') format('svg');
    font-weight: normal;
    font-style: normal;
}

The src url is fine, it works.

Maybe I can edit the .htaccess in some way to fix it?

Okay, so here’s some more information.

If I change the src to “.../css/TitilliumText22L001-webfont.woff”, the fonts are rendered properly on the secondary pages (index.php/blog, index.php/services, etc).

If I keep the src as it is, the fonts are rendered properly on the homepage, but not on the secondary pages.

So this has got to be an issue with how it’s linking to the fonts, right? I mean it’s an EE specific issue as the same website works just fine in the plain XHTML/CSS version w/o the CMS. Whenever it reads a page and changes the url to index.php/.../, it fails to work.

Never had this problem. What if you place your font files in a “font” directory on your web root and link to it like this:

@font-face {
    font-family: 'LiberationSansRegular';
    src: url('/fonts/LiberationSans-Regular-webfont.eot');
    src: local('☺'), url('/fonts/LiberationSans-Regular-webfont.woff') format('woff'), url('/fonts/LiberationSans-Regular-webfont.ttf') format('truetype'), url('/fonts/LiberationSans-Regular-webfont.svg#webfontUF7dB9bF') format('svg');
    font-weight: normal;
    font-style: normal;
}

(worked for me on every page)

Hm, nope. It’s still not rendering properly on the homepage, but it does after I go to a secondary page and back to the homepage.

OK, just checking…
- Are you sure the CSS is loaded at all on the homepage?
- Are you stripping index.php from your URL’s using the standard .htacces AND in the CP > Admin > General configuration “Name of your site’s index page” field is blank?

Yeah, the same header include is being loaded on all the pages:

{embed="includes/head"}

I’m stripping out the index.php all together using this as my .htaccess:

RewriteEngine on 
RewriteCond $1 ^(member|search|work|services|profile|contact|includes|blog|P[0-9]{2,8}) [NC] 
RewriteRule ^(.*)$ /index.php/$1 [L]

And I have index.php deleted out of that General Configuration field, yeah. It’s blank.

It’s weird. I can put:

<style>
@font-face {
    font-family: 'TitilliumText22LThin';
    src: url('/fonts/TitilliumText22L001-webfont.eot');
    src: local('?'), url('/fonts/TitilliumText22L001-webfont.woff') format('woff'), url('/fonts/TitilliumText22L001-webfont.ttf') format('truetype'), url('/fonts/TitilliumText22L001-webfont.svg#webfontHIqteXlE') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>

inline in my index.html of my “site” template group (the homepage) and it renders fine… It just won’t allow me to link it.

This doesn’t look strictly like an EE issue so I’m going to move this to the CodeShare Corner. Thanks.

But it works under the exact same structure w/o EE installed.

So, it doesn’t work on any template group that I set to be the homepage. It works if I create some inline styles on the homepage template, but I don’t want to do that. It’s sloppy. Why would it not work on the homepage (no matter the page) and no other? I already know it’s not the .htaccess. I know it’s not the @font-face code.

Does how does linking change when the homepage is referenced as opposed to the other pages?

I can use the exact css as what’s given to me on Kernest (http://www.kernest.com) and it works with the fonts hosted on their servers, but their servers are slow and sometimes unresponsive. When I change the same css to point at the fonts hosted on my server, it still doesn’t work on the homepage. Argh!

Can you move this back to the ExpressionEngine Support forum?

Ugh.

Where are your stylesheets located? Do you upload (FTP) them to a folder on your webspace? Or do you manage them as EE templates? (E.g., ‘styles’ is your template group and ‘fontface’ is the name of the CSS template.)

You’re using the Include List Method to remove index.php from your URLs (right?). So if you’re managing your CSS as EE templates, then ‘styles’ needs to be part of your .htaccess:

RewriteEngine on 
RewriteCond $1 ^(member|search|styles|work|services|profile|contact|includes|blog|P[0-9]{2,8}) [NC] 
RewriteRule ^(.*)$ /index.php/$1 [L]

I’m managing them w/EE. Well, not entirely…I have the option; I have them saved as files so I can manage them via FTP.

The “styles” group is in my .htaccess, but it still doesn’t work. Well, not in Firefox or IE anyways. It works in all other browsers.

It’s weird because the inline @font-face styles are exactly the same as the linked styles (same path to the fonts). I can link the styles and it works in IE and Firefox if the fonts aren’t on my server, but on another server, such as Kernest. I have no idea what’s going on…

Thanks for your response!

Try a link like the below and see what happens:

<a href="http://example.com/index.php/css/styles/fontface/">http://example.com/index.php/css/styles/fontface/</a>

I know you’ve taken ‘index.php’ out.

I’ve had issues with the stylesheet tag on some hosts, which I usually resolve by linking to the stylesheets directly—that is, not using the stylesheet tag.