@font-face not loading for Wordpress site

Posted on 2015-01-08
Medium Priority
Last Modified: 2015-01-09
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.
Question by:doug s
  • 2
LVL 43

Accepted Solution

Rob earned 2000 total points
ID: 40539226
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.

Author Comment

by:doug s
ID: 40541401
Weird, the fonts finally rendered, I'm guessing it was a cache issue with my browser.

Author Comment

by:doug s
ID: 40541410
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.

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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.

Join & Write a Comment

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
While Plesk offers many potential benefits to website administrators, including compatibility with Windows Server and other leading technologies, the company has also been working to differentiate it from other control panels for content management…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question