@font-face not loading for Wordpress site

I can't figure out why my custom fonts are loading.

I've tried entering this in both the theme's stylesheet: avada/style.css and in Theme Options > Custom CSS

@font-face {
    font-family: 'ITCAvantGardeStd-Demi;
    src: url('http://7pwc.moshpitdigital.com/fonts/ITCAvantGardeStd-Demi.eot');
    src: url('http://7pwc.moshpitdigital.com/fonts/ITCAvantGardeStd-Demi.eot?#iefix') format('embedded-opentype'),
         url('http://7pwc.moshpitdigital.com/fonts/ITCAvantGardeStd-Demi.woff2') format('woff2'),
         url('http://7pwc.moshpitdigital.com/fonts/ITCAvantGardeStd-Demi.woff') format('woff'),
         url('http://7pwc.moshpitdigital.com/fonts/ITCAvantGardeStd-Demi.ttf') format('truetype'),
         url('http://7pwc.moshpitdigital.com/fonts/ITCAvantGardeStd-Demi.svg#ITCAvantGardeStd-Demi') format('svg');
    font-weight: normal;
    font-style: normal;

   body { font-family: "ITCAvantGardeStd-Demi", }
   h1, h2, h3, h4, h5 { 
   font-family: 'ITCAvantGardeStd-Demi',
   font-weight: 400; }
a { font-family: "ITCAvantGardeStd-Demi", }
   li { font-family: "ITCAvantGardeStd-Demi", }

Open in new window

After digging through Firebug, it seems I cannot overwrite the following:

body {
    color: #747474;
    font: 13px/20px "PTSansRegular",Arial,Helvetica,sans-serif;

Open in new window

I've also disabled any fonts in the Theme Options as described here: http://stackoverflow.com/questions/22971475/how-to-add-custom-font-for-avada-wordpress-theme

The file path's are correct with valid files. However I can't get my css to overwrite the theme's stylesheet:

Any idea why my fonts won't load?

P.S. What is the correct way to refer to file paths without having to use the entire file address? I see many examples of @font-face using url('/fonts/example.ttf')

I don't understand how to deploy this properly without writing the full address. My font files are located in http://7pwc.moshpitdigital.com/fonts/.

Thank you, any help appreciated.
doug sAsked:
Who is Participating?
RobConnect With a Mentor Owner (Aidellio)Commented:
Are there any error messages in the console of the dev tools?  Also under the network tab you'll see if the fonts have been loaded or not.  Please report back.
doug sAuthor Commented:
Weird, the fonts finally rendered, I'm guessing it was a cache issue with my browser.
doug sAuthor Commented:
Can anyone explain to me the rules in how to refer to a local file without typing out the whole address?


@font-face {
    font-family: 'ITCAvantGardeStd-Demi;
    src: url('http://7pwc.moshpitdigital.com/fonts/ITCAvantGardeStd-Demi.eot');

without having to type out the full address.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.