Thread

Thanks, but I’ve tried that too. That is, linking directly to the stylesheets with and without the “index.php”. Nothing works!

Any fix for this yet? Having the same problem over here!

Nope, still no fix. =-(

Nope. No fix. =-(

I have @font-face working in EE with the index page removed here (still in development):
http://newcanaanpreservationalliance.org/ncpa/programs/threats_to_buildings/

I did have a couple of problems w/@font-face when I minified and combined the CSS, so I separated the font CSS with @font-face rules from the rest of the CSS. I also had to use relative paths, I’d read that absolute paths were an issue for some reason. Also I added

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

to the domain’s .htaccess file (if relevant). Hope something here is helpful.

Hello All.

I was noticing the same issue. Firefox will not allow you to load @font-face hosted on other domains (or sub-domains).

I came across this solution which seems to be working for my websites sub-domains. In the .htaccess file in your root folder :

RewriteEngine On

RewriteBase /

<FilesMatch "\.(ttf|otf|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

I am no expert in this, and really don’t understand why it works, but it does for me.

Cheers.

I have had no problems

all my fonts in

webroot/fonts

my html pages

ee/eesystem/templates/default_site/main.group/examplepage.html

which link, like so to style sheet

{preload_replace:css_template_group="site_css"}
<link rel="stylesheet" href="{stylesheet={css_template_group}/fonts}" />

my style sheet is located at

ee/eesystem/templates/default_site/site_css.group/fonts.css

which links to fonts like so

/*Generated by Font Squirrel (<a href="http://www.fontsquirrel.com">http://www.fontsquirrel.com</a>) on December 4, 2010
FONTS ----------------------------------------------------------------- */

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

fonts work on all my pages

@Fat Free Interactive,

That .htaccess rewrite (above) definitely solved my issue with Firefox and @font-face! Thx!

By the way, I’d definitely recommend using absolute paths to the font directory:

src:url('http://www.domain.com/fonts/webfont.eot

Regards, Christian

I’ve got a similar problem here in that the fonts load when I view “domain.com” but when I view “www.domain.com” it does not. This happens in FF4.

I’ve uploaded a test folder (outside of EE) and the fonts load fine in both URLs.

I’ve tried moving the fonts into a fonts folder in the root but that makes no difference.

I’ve tried adding a full http path to the font url in the CSS but that also makes no difference.

Any ideas?

I’ve got a similar problem here in that the fonts load when I view “domain.com” but when I view “www.domain.com” it does not. This happens in FF4.

I’ve uploaded a test folder (outside of EE) and the fonts load fine in both URLs.

I’ve tried moving the fonts into a fonts folder in the root but that makes no difference.

I’ve tried adding a full http path to the font url in the CSS but that also makes no difference.

Any ideas?

see if this syntax helps.

Hi smartpill, that’s exactly what I’m already using 😊

David,
Are you compressing your CSS and is your CSS file external or in an EE template? I’m using that syntax on my own site and it works fine in FF4 too. My CSS is linked as an external file and my local fonts are in the same directory as the CSS file.

Do you have a link to one of these funky pages?

Well, I added the htaccess rule shown above in post#20 and it now works. My issue has nothing to do with subdomains or cross-domain, so I don’t know what’s going on there, but it now works.

Bizarre.

I’m having a similar problem.  I have my stylesheets coded as follows:

<link rel=“styleshee” type=“text/css” href=“http://www.mysite.com/css/global.css” />

<link rel=“stylesheet” type=“text/css” href=”{if segment_1==""}http://www.mysite.com/css/home.css{/if}{if segment_1=="blog"}http://www.mysite.com/css/blog.css{/if}{if segment_1=="about"}http://www.mysite.com/css/about.css{/if}{if segment_1=="contact"}http://www.mysite.com/css/contact.css{/if}” />

That conditional may be my problem, but I only declare fonts in the global.css file.  No fonts are declared in any other stylesheets.

The fonts work correctly on all pages in Safari, Chrome, IE, and Opera.  In FF 6 however, the fonts only work correctly on the template group’s index pages.  On every template group’s sub page, Firefox reverts the fonts to Times New Roman instead of obeying the @font-face declarations from the global.css file. 

I am not managing the CSS files in ExpressionEngine, nor have I removed index.php from the URL.  If I pull up the source code on the sub-pages, the CSS links are all as they should be, with no change whatsoever from the template group’s index page. 

Any thoughts?

Furthermore, after visiting a sub-page in FireFox, the fonts remain Times New Roman for any page I visit on the site until I return to the site’s main Home page.  When I return to the Home page, the fonts are again displayed correctly until I visit a sub-page when the behavior resumes.

P.S. I’m new, this is my first EE site.

Weird…