font-face works on all but one page- what could be the issue?

Question

Font-Face is working on all but one of my pages- About. Because it's just the one page that isn't working, I don't think it could be an issue with file paths. Also, everything worked great locally. What could be the cause? How do I remedy?

Thank you.

<div id="about">
    <div class="blurb">
        <p style="text-decoration:underline;color:#f20000;"><span style="color:#282828;">Welcome to BodywoRx</span></p>
</div><!-- end blurb -->

    <div class="banner-image">
        <img src="<?php echo get_template_directory_uri(); ?>/img/large.jpg" alt="about-place-holder" id="aph" />
    </div><!-- end banner-image -->
    <p>Body WoRx was founded on the belief that many dysfunctions of the body can be healed through massage therapy.  In a world where prescriptions are written for variety of symptoms, we offer an alternative solution to helping the body heal itself.  We are located in historic downtown Grand Prairie, conveniently centered between Fort Worth and Dallas.</p>
    <div class="bio">
        <img src="<?php echo get_template_directory_uri(); ?>/img/bridgett.jpg" alt="bridgett-freiburger" id="bf" />
        <p>Bridgett suffered from chronic neck, back, and shoulder pain for many years.  She went to many doctors, specialists, had many MRI&apos;s, but no one knew what was causing the pain.  She had been prescribed countless medications to help ease discomfort, but nothing to address the cause.  Bridgett stumbled across massage therapy and has since become a firm believer and advocate in its many benefits and healing properties.  Before getting into massage therapy, Bridgett served in the Marine Corps, and then continued supporting the war fighter while working at Bell Helicopter. Bridgett is a graduate of North Texas School of Swedish Massage.</p>
    </div><!-- end bio -->
</div><!-- end about -->

#about .banner-image {
    padding-bottom: 40px;
}

#about span {
    font-family: alexandria-bold;
    font-size: 193%;
    font-weight: normal;
    line-height: 1.5;
}

#about p {
    padding-top: 10px;
}

#about .bio {
    margin-top: 40px;
    padding-bottom: 40px;
}

#about .bio p {
    float: right;
    padding-left: 35px;
    width: 655px;
}

Answer 1

You have 3 out of 6 @font-face fonts that are at the specified location for main and about page.

Firefox w/Firebug Net Tab Screenshot:

Side note: Your missing closing anchor tag in id="address" in both (maybe more) those pages.

---

Status Update: I have found the solution for your @font-face issue with Firefox. There are 2 issues.

First, let's take a trip back in time when you originally published your LIVE webpage link explaining you have no issues with it. All links below are useable and reflect the format seen.

It's understood works is a TYPO and should be worx. This obviously is not your website.

http://massagebybodyworks.com/

OK so, here's the corrected version... right?

http://massagebybodyworx.com/

Well, the corrected version worxs as required (pun intended).

Now let's look at the link for the About Page that's not working:

http://www.massagebybodyworx.com/about

Put on the breaks! Do you see the error? Well, as it turns out your About Page is using www for the anchor tag and it should not. That's why it breaks. The anchor tag should be:

http://massagebybodyworx.com/about

Having said that, here's your corrected homepage with the www used and notice it breaks in Firefox too: http://www.massagebybodyworx.com/

OK, issue 1 is resolved. Just fix your anchor tag not to use www in the link.

Issue 2 is regarding your servers .htaccess file since that controls how incoming handling of links are dealt with.

Specifically, whenever somebody manually types or visits your webpage via www prefix, your server needs to be configured to serve them the non www site. Then, your webpage is presented as you intended. Research more about .htaccess file on Google if you need to.

---

So then, why does it fail in Firefox and not Chrome?

Firefox has different security rules in place and using @font-face incorrectly will cause it to break because of Same Origin Policy rules.

The reason it breaks in Firefox can be seen in your HTML webpage markup. There, you are calling up your CSS file responsible for the @font-face fonts using an absolute URL:

"http://massagebybodyworx.com/wp-content/themes/bodyworx/style.css"

Then, accessing your site via www will cause Same Origin Policy rule to be applied resulting in your @font-face fonts not to show as intended.

You can however use a relative URL to make Firefox happy:

"wp-content/themes/bodyworx/style.css"

Having a relative URL also means there aren't issues with @font-face for when your site is visited with or without the www in the incoming link, but proper handling of the .htaccess file is preferred.

Side note: You have a white space issue that should be URL encoded for a link tag in your head section. Here's how it should look:

<link rel="pingback" href="BodywoRx%20Massage" />