@font-face NOT working when accessing "www.domain.tld" but WORKING with "domain.tld"

Question

Problem

If i access my site via www.domain.tld the @font-face rule is omited. If i go to domain.tld (without the 'www' part) @font-face is regarded. All other css formattings are working in both cases fine.

CSS

@font-face {
    font-family: 'font-name';
    src: url(../fonts/font-name.eot);
    src: local("font-name"), url(../fonts/font-name.ttf) format("truetype");
}

Django

In my Django settings.py:

STATIC_ROOT = '/var/www/domain.tld/static/'
STATIC_URL = 'http://domain.tld/static/'

If i change it to STATIC_URL = 'http://www.domain.tld/static/' the @font-face rule is omited on domain.tld and regarded on www.domain.tld so it's the reverse behavior.

Apache

<VirtualHost *:80>
    CustomLog /var/log/apache2/domain.tld.log combined

    ServerName domain.tld
    ServerAlias www.domain.tld

    WSGIScriptAlias / /var/www/domain.tld/wsgi


    Alias /static/ /var/www/domain.tld/static/

    Alias /robots.txt /var/www/domain.tld/static/robots.txt
    Alias /favicon.ico /var/www/domain.tld/static/img/favicon.ico
</VirtualHost>

Why do you use a STATIC_URL with the FQDN? just use '/static/' and let Apache handle the rest. — petkostas, Aug 12 '14 at 18:03
Just try url in quotes `src: url('../fonts/font-name.eot');` — Hareesh, Aug 12 '14 at 18:33
Yes because browsers consider even font loading from different domains a bad idea (cross site). — petkostas, Aug 12 '14 at 18:33
@petkostas Because i thought it's the same. Hm, i tested it and now it seems to work, but i can't figure out why (completely different domains should work too)...Furthermore all other css rules are in both cases regarded. Has somebody an explanation? — Ulfric Storm, Aug 12 '14 at 18:34

score 1 · Accepted Answer · edited May 23 '17 at 12:05

cross-domain Web font embedding is denied by some browsers (not sure if it applies to all or some), and I believe this should remain as is (security wise). Apart from that, you don't need a FQDN either for STATIC_URL or MEDIA_URL your web server takes care serving static content, the url is used for providing a identifiable url for asset loading. So if you visit your website from a subdomain not everything is going to work if you have a FQDN in your static, remove the FQDN and just use the directory name you want, makes it easier also to port settings to a sandbox or a production system with multiple subdomains. You can also further check this stackoverflow question (there are some solutions provided, mind though that I don't know if its working as I never had such an issue):

@font-face fonts only work on their own domain

Thanks for the detailed explanation! – Ulfric Storm Aug 12 '14 at 18:43 — Ulfric Storm, Aug 12 '14 at 18:43

@font-face NOT working when accessing "www.domain.tld" but WORKING with "domain.tld"

Problem

CSS

Django

Apache

1 Answers1