Search code examples
htmlcssfontsfont-facewebfonts

Webfonts not working when code looks to be correct

I'm making a new site and webfonts aren't working at all. I stole the chunk of code as well as the same exact font files from a previous website I made, yet they don't work on this new site. I'm working from a responsive framework so I have a feeling something is taking priority over the code I've written to use webfonts.

The URL is http://willryan.us/responsive and the chunk I'm (currently) trying to make a webfont is the big "Will Ryan" at the top.

loading font

  @font-face {
  font-family: 'MuseoSlab700';
  src: url('assets/webfonts/museo_slab_700-webfont.eot') format('eot'), 
       url('assets/webfonts/museo_slab_700-webfont.woff') format('woff'),
       url('assets/webfonts/museo_slab_700-webfont.ttf') format('truetype');
  /* font-weight:200; /* fixes bold bug in Firefox */
  /*-webkit-font-smoothing: antialiased; /* Fixes viewing in Safari. Maybe unnecessary */
  }

header code

h1, h2, h3, h4, h5, h6 {
font-family:  'MuseoSlab700', Helvetica, sans-serif;
font-weight : normal;
margin-top: 10px;
letter-spacing: 0;
}

specific header code

h2 { 
font-family: 'MuseoSlab700';
color: #222;
margin-bottom : .5em;
margin-top : .5em;
font-size : 2.75em; /* 40 / 16 */
line-height : 1.2;
text-align: center;
}

html

<div class="section group">
    <div class="col span_3_of_3">
    <h2><a href="index.html">WILL RYAN</a></h2>
    </div>
</div>
Solution

    • Your CSS is in here: http://willryan.us/responsive/css/ , more exactly styles.css

    • From there, you're trying to load assets/webfonts/aCertainWebFont.woff

    • So the WOFF file should be in the directory /responsive/css/assets/webfonts/
      (on the FTP/SSH side, something like /var/site102/www/responsive/css/assets/webfonts/ but I digress)

    You can check in Firebug or Inspector or any Devtools (F12) in the Network tab: red color and 404 status is bad, properly loading is better :)