Solved

@font-face not loading for Wordpress site

Posted on 2015-01-08
3
415 Views
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.
0
Comment
Question by:doug s
  • 2
3 Comments
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 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.
0
 
LVL 4

Author Comment

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

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?

a.k.a

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

without having to type out the full address.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

912 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now