Solved

@font-face not loading for Wordpress site

Posted on 2015-01-08
3
426 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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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.

831 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