Skip navigation
NoizyCr1cket
NoizyCr1cket
Currently Being Moderated

@Font-Face isn't working

Sep 22, 2012 3:37 PM

Hi. I'm trying out the css @font-face style and it's not working. I built a simple html document along with simple css, so I expected it to work, but it won't.

 

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Test</title>

<link href="css/index-css.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div>

<p id="fonttest">Bebas Regular. Home. Services. About Us. Mission Statement.</p>

</div>

</body>

</html>

 

CSS:

 

@charset "utf-8";

/* CSS Document */

 

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 22, 2012 */

 

@font-face {

    font-family: 'bebasregular';

    src: url('bebas___-webfont.eot');

    src: url('bebas___-webfont.eot?#iefix') format('embedded-opentype'),

         url('bebas___-webfont.woff') format('woff'),

         url('bebas___-webfont.ttf') format('truetype'),

         url('bebas___-webfont.svg#bebasregular') format('svg');

    font-weight: normal;

    font-style: normal;

 

}

 

#fonttest {

    font-family: bebasregular, verdana, sans-serif;

    font-size:2em;

}

 

Can someone please help?

1128 Views   4 Replies   Latest reply: Rik Ramsay, Sep 24, 2012 11:33 AM
 
Replies
  • John Waller
    Currently Being Moderated
    1. John Waller,
    Sep 22, 2012 3:42 PM   in reply to NoizyCr1cket
    Report

    Have you downloaded the Bebas font file and uploaded it to the correct folder of your website so that when the CSS tells the browser to use the specific font, the browser can find the font?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    2. Sudarshan Thiagarajan,
    Sep 23, 2012 7:16 AM   in reply to NoizyCr1cket
    Report

    Where have you placed your webfont files that were generated by Fontsquirrel? Is it in the root location of your HTML file (because that is what your CSS rule says).

     

    Also, what version of DW are you using? Depending on what version you're using, there is an option within DW that can embed your created webfont family within your project.

     
    |
    Mark as:
  • NoizyCr1cket
    Currently Being Moderated
    3. NoizyCr1cket,
    Sep 23, 2012 2:32 PM   in reply to NoizyCr1cket
    Report

    Thanks for the responses, but I figured it out. The font files have to be in the same folder as the CSS, not the HTML.

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    4. Rik Ramsay,
    Sep 24, 2012 11:33 AM   in reply to NoizyCr1cket
    Report

    NoizyCr1cket wrote:

    Thanks for the responses, but I figured it out. The font files have to be in the same folder as the CSS, not the HTML.

     

    As an FYI for the future, and for anyone else that comes across your question, the fonts DO NOT need to be in the same folder as the CSS. However, you do need to link to them correctly.

     

    Eg, src: url('bebas___-webfont.eot'); which is in your CSS sheet is looking for that file in the same location as the CSS sheet.

    If you add / before, /bebas__-webfont.eot, then it is looking for the font in the root of the site.

     

    Personally, I keep my fonts in a "fonts" folder in the root of the site so my URL from your CSS sheet would have been:

    src: url('/fonts/bebas___-webfont.eot');

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points