Using @font-face 'bad URI or cross-site access' error

  • 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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter mattstonny

    (@mattstonny)

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter mattstonny

    (@mattstonny)

    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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter mattstonny

    (@mattstonny)

    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…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    /blog/wp-content/themes/livingwellblog/fonts/DroidSerif-Regular-webfont.eot

    Thread Starter mattstonny

    (@mattstonny)

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

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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?

    Thread Starter mattstonny

    (@mattstonny)

    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… ??

    Thanks for your time Andrew

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Using @font-face 'bad URI or cross-site access' error’ is closed to new replies.