Fonts don't work from a cookie-free domain?

  • Resolved GermanKiwi

    (@germankiwi)


    11 years ago

    Hi, do you know if it works to serve the web fonts from a “cookie free domain”?

    I just tried to impliment a feature in WordPress Core which lets you set the domain which cookies are served from, and thus also set a cookie-free domain for the static content, which should help with page performance. It’s recommended by the “YSlow” speed test, as well as by numerous WordPress tutorials like this one (Tip #1) and by Google themselves.

    So I registered a new sub-domain for myself (static.example.com – I’ll use “example.com” as my domain name here). Then I added these two lines to my wp-config.php file as instructed in the tutorials:

    define('WP_CONTENT_URL', 'https://static.example.com');
define('COOKIE_DOMAIN', 'www.example.com');

    Everything works perfectly fine on my website after this, with the sole exception of the Font Awesome fonts from this plugin – they don’t display at all!

    The path to the CSS file, which now appears in the <head> section of my pages, is correct and works:
    https://static.example.com/plugins/wp-visual-icon-fonts/css/wpvi-fa4.css

    In trying to troubleshoot this, the first thing I did was open the wpvi-fa4.css file and change the font paths there, from:
    '../fonts/fa4/fontawesome-webfont.eot?v=4.0.1'
    to:
    'https://static.example.com/plugins/wp-visual-icon-fonts/fonts/fa4/fontawesome-webfont.eot?v=4.0.1'

    But that didn’t work.

    Then I changed the font paths in the wpvi-fa4.css file to:

    'https://www.example.com/wp-content/plugins/wp-visual-icon-fonts/fonts/fa4/fontawesome-webfont.eot?v=4.0.1'

    And then the fonts worked again! They were now displaying correctly on my website.

    So for some reason it seems the fonts don’t work when they are using the “static” URL, even though the URL itself is correct.

    But I have no idea why this would be so.

    I could change the URL of the CSS file to point to the BootstrapCDN path at //netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css and this would work fine – and I believe this CDN server would also be cookie-free – so I don’t know why it fails when I use static.example.com instead.

    Any ideas or thoughts?

    https://www.ads-software.com/plugins/wp-visual-icon-fonts/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter GermanKiwi

    (@germankiwi)

    …BTW I’m not suggesting that there is necessarily something wrong with your plugin here! I’m just hoping you could help me troubleshoot this or give me some insight or a work-around or something. Maybe you know more about this topic than I do. ??

    Paul van Zyl

    (@pushplaybang)

    Hey

    I’m sure that know enough in rhis area particularly though I imigine there may either a path problem, or a cross origin policy issue, though I wouldn’t be able to help without doing a little research.

    I’ll leave this thread open for a while in case other users can help, though you may have more luck asking a more general question on stack overflow regarding cookie free domains and web fonts.

    Good luck!

    Paul

    Ps: please post back here when you solve this.

    Thread Starter GermanKiwi

    (@germankiwi)

    Hmm, you might be onto something with the cross origin thing – I’ll look into that and let you know if that helps.

    Thread Starter GermanKiwi

    (@germankiwi)

    Yup, turns out it was caused by the “Cross-Origin Resource Sharing standard (CORS)”. Web fonts can’t be served from a different domain as the webpage, unless special permission is given by the web server to do so.

    This is described here: https://davidwalsh.name/cdn-fonts

    The same issue can also apply to images: https://developer.mozilla.org/en/CORS_Enabled_Image

    I fixed it by adding a bit of text to my .htaccess file, which I copied from the HTML5 Boilerplate project’s sample .htacess file – as follows:

    # ------------------------------------------------------------------------------
# | CORS-enabled images |
# ------------------------------------------------------------------------------

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "https://www.example.com" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

# ------------------------------------------------------------------------------
# | Web fonts access |
# ------------------------------------------------------------------------------

# Allow access from all domains for web fonts

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|otf|ttc|ttf|woff)$">
        Header set Access-Control-Allow-Origin "https://www.example.com"
    </FilesMatch>
</IfModule>

    This means that my new sub-domain “static.example.com”, which is where the web-fonts are located and which is using this .htaccess file, will give permission for the fonts to be served to https://www.example.com which is my main domain where WP is running. So the web pages at https://www.example.com can contain links to the web fonts at static.example.com and this will now work.

    Problem solved – thanks for helping me know where to look!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fonts don't work from a cookie-free domain?’ is closed to new replies.