WordPress.org

Ready to get started?Download WordPress

Forums

Using @font-face 'bad URI or cross-site access' error (11 posts)

  1. mattstonny
    Member
    Posted 2 years ago #

    Hi Everyone

    I've been creating a blog for a site recently and everything has gone smoothly so far except for a peculiar problem that I have encountered with the use of @font-face. It only seems to occur in Firefox.

    The fonts show up on the post detail page but not on the main blog listing page. Checking for errors in Firebug states that there is a 'bad URI or cross-site access not allowed' error.

    Previously, I was using Cufon to render the fonts and had a similar problem.

    The site is set up on a sub domain within a folder of the site and the theme created to match the original site e.g. blog.sitename.com

    Yours

  2. Andrew
    Forum moderator
    Posted 2 years ago #

    What are the URLs to your fonts, in the CSS @font-face code?

  3. mattstonny
    Member
    Posted 2 years ago #

    Hi Andrew

    The @font-face code is as follows:

    @font-face {
    font-family: 'DroidSerifRegular';
    src: url('_fonts/DroidSerif-Regular-webfont.eot');
    src: url('_fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('_fonts/DroidSerif-Regular-webfont.woff') format('woff'),
    url('_fonts/DroidSerif-Regular-webfont.ttf') format('truetype'),
    url('_fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

    A folder called _fonts is in the same directory as the theme if that helps

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    Try using a more specific URL like; /wp-content/themes/yourTheme/_fonts/.

  5. mattstonny
    Member
    Posted 2 years ago #

    Sadly that didn't seem to work.

    If it helps matters, here is the work in progress clicky

    Just to let you know that there doesn't seem to be a font problem in Chrome

  6. Andrew
    Forum moderator
    Posted 2 years ago #

    Not that I'm convinced I'm right, I just don't see the URL change
    http://snag.gy/Sov2R.jpg

  7. mattstonny
    Member
    Posted 2 years ago #

    I've altered the URL, but still no joy, and it seems to ignore it altogether now unless I've made a mistake.

    Most puzzling...

  8. Andrew
    Forum moderator
    Posted 2 years ago #

    Oh, use /blog at the start of your URLs;
    E.g,

    /blog/wp-content/themes/livingwellblog/fonts/DroidSerif-Regular-webfont.eot
  9. mattstonny
    Member
    Posted 2 years ago #

    Cheers Andrew, I have given all of the fonts that URL

    The fonts are showing up again, but still the issue persists with Firefox.

  10. Andrew
    Forum moderator
    Posted 2 years ago #

    I'm not sure I see the issue of the font not loading in Firefox, but it does look different there. It looks shorter.

    Is it just that font family, if you try switching to another font family, does the problem persist?

  11. mattstonny
    Member
    Posted 2 years ago #

    Got there in the end...

    I think it was to do with the fact that I hadn't included:

    font-family: 'Droid Serif', serif;

    I initially put

    font-family: 'DroidSerifBold';

    as I thought it was referencing a file. Then I double checked the Google documentation and all is well :-) That's what happens with late nights lol

    I will use this method for the time being although I started out with Cufon as the entire site and blog would match, but that's another thread altogether... :D

    Thanks for your time Andrew

Topic Closed

This topic has been closed to new replies.

About this Topic