WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] @font-face works on local but not on remote (3 posts)

  1. cfheinen
    Member
    Posted 3 years ago #

    I recently uploaded my WordPress site and the @font-face fonts I use in my theme stopped working. If I download the theme, rename it and use it back in my local version, everything works just like it did initially. So, it would appear as though the theme is not the culprit. Assuming the theme files are structured correctly and the fonts can link up (on local), what could be causing this issue? Any help would be greatly appreciated!

    Here is my @font-face CSS from my style.css:

    @font-face {
        font-family: 'MuseoSans500';  /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
        src: url('fonts/museo-sans/museosans_500-webfont.eot');
        src: local('☺'), url('fonts/museo-sans/museosans_500-webfont.woff') format('woff'), url('fonts/museo-sans/museosans_500-webfont.ttf') format('truetype'), url('fonts/museo-sans/museosans_500-webfont.svg#webfontYGyeC87y') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'GoudyBookletter1911Regular';
        src: url('fonts/goudybookletter1911/goudybookletter1911-webfont.eot');
        src: local('☺'), url('fonts/goudybookletter1911/goudybookletter1911-webfont.woff') format('woff'), url('fonts/goudybookletter1911/goudybookletter1911-webfont.ttf') format('truetype'), url('fonts/goudybookletter1911/goudybookletter1911-webfont.svg#webfont96aGTxex') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  2. flamenco
    Member
    Posted 3 years ago #

    Hi,
    That's why I never test locally. I don't like surprises. :)
    But seriously, I will first assume that you've uploaded every single script file including the font files.

    My first guess would be that maybe you're having a path problem in each URL setting above. You could try a slash at the beginning of the path, or even the entire site path, such as "http://yoursite/wp-content/themes/yourtheme/fonts...." and so on. Your live server may have different settings than your test server.

    Another thought... I don't use .woff when I do these, so I really don't know how well that would work; I tend to use .ttf. (I realize it's possible that .woff is fine! just thinking out loud) And if you're browsing the live site with IE, you won't get your fonts - that silly browser generally will want .eot files.

    That's my CSS-guy take. Maybe one of those thoughts will help.

    Good luck, D

  3. cfheinen
    Member
    Posted 3 years ago #

    Thanks for the help flamenco! Turns out it was permissions issues with the font folders. The files were returning 403 (Forbidden) and causing the problem. After adjusting the permissions everything worked just fine! Hope this helps someone down the road.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags