WordPress.org

Ready to get started?Download WordPress

Forums

WP Visual Icon Fonts
[resolved] Fonts don't work from a cookie-free domain? (5 posts)

  1. GermanKiwi
    Member
    Posted 9 months 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', 'http://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:
    http://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:
    'http://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:

    'http://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?

    http://wordpress.org/plugins/wp-visual-icon-fonts/

  2. GermanKiwi
    Member
    Posted 9 months ago #

    ...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. :)

  3. Paul
    Member
    Plugin Author

    Posted 8 months ago #

    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.

  4. GermanKiwi
    Member
    Posted 8 months ago #

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

  5. GermanKiwi
    Member
    Posted 8 months ago #

    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: http://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 "http://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 "http://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 http://www.example.com which is my main domain where WP is running. So the web pages at http://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!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.