0

Want to add a font to website.

CSS File:

@font-face {
    font-family: smFont;
    src: url(optima-regular-webfont.woff);

}

.smFont {
    font-family: smFont;
}

HTML File:

About <strong class="smFont">The Company</strong>

I have the above but the font doesn't come out right. Is my code wrong?

eYe
  • 1,695
  • 2
  • 29
  • 54
sgchecker
  • 63
  • 7
  • 2
    Where is your font...are you sure about your relative path? – Luís P. A. Mar 16 '15 at 15:14
  • 1
    Is the path to `optima-regular-webfont.woff` correct? If you view the page requests, does it load? Other than that, I think everything looks fine. – Carl Reid Mar 16 '15 at 15:15
  • 1
    check the path and check you are using a browser that supports `.woff` (i.e. not ie8) – atmd Mar 16 '15 at 15:16
  • yeah. the font is in the root same path as the file. the page is at http://sarahmyra.com/beta2/index.php – sgchecker Mar 16 '15 at 15:18
  • 1
    the css file or the html file? is your structure some.html, some.css, some.woff all in the same directory? – atmd Mar 16 '15 at 15:19
  • Your page is trying to load it from the /css/ directory. Change the CSS to `src: url("../optima-regular-webfont.woff");` – Carl Reid Mar 16 '15 at 15:22
  • If you check the Network tab in Firebug for example, you'll see that it's looking in the CSS folder for the .woff file, and it doesn't exist there. Use `src: url("../` – Nick R Mar 16 '15 at 15:23

3 Answers3

1

When you want to add your own font besides the ones that normal system fonts, you have to bullet proof your fonts with @font-face. You are on the correct path the way you have started to do it. But you also have to include different font types of your font for various browser integration like ie, chrome, safari, FF etc. The different font types include woff, ttf, eot, svg etc.

You can refer this link , a fantastic article by Paul Irish. This explains what goes on in defining a font type for your webpage.

Now another reason you could run into trouble in loading the font is when the font file itself is not loaded properly. Thi happens when the source url provided for the font file is not correct.

In your case src: url(optima-regular-webfont.woff); line of code instructs the server to look for the font file in the same lever as where the page file ( html) is loaded from. Check if that is the case for you.

Hope this helps.

EDIT:::

In one of your comments you had given the link where the site is hosted. The console gives me this error..

Failed to load resource: the server responded with a status of 404 (Not    Found)        http://sarahmyra.com/beta2/css/optima-regular-webfont.woff 
Failed to load resource: the server responded with a status of 404 (Not Found)    http://sarahmyra.com/beta2/css/Optima_Medium.ttf

Now please check the path to font file.

Sai
  • 1,889
  • 5
  • 18
  • 26
  • `.woff` is supported for [all browser ie9 and above including mobile](http://caniuse.com/#feat=woff) (except opera mini) That link is from 6 years ago and is no longer relevant – atmd Mar 16 '15 at 15:22
  • why the downvote? atleast explain the vote – Sai Mar 16 '15 at 15:27
  • doesnt seem to work still.... i have added in the other format fonts http://sarahmyra.com/beta2/index.php – sgchecker Mar 16 '15 at 15:31
  • 1
    open the network tab of your browser and see if the font file is loaded. – Sai Mar 16 '15 at 15:32
  • also check jamie Baker's answer about setting the MIME type in the webserver. I did not cover that part in my answer. When I set up my apache that was already setup for handling the woff mime type. – Sai Mar 16 '15 at 15:33
  • wasn't me, whilst the link was old I didn't feel it needed down voting – atmd Mar 16 '15 at 15:33
  • 1
    @atmd - I know it wasnt you lol. but I do feel like if somebody was downvoting something atleast leave anonymous comment stating how and where I was wrong. If I am wrong then I will own up to it and also I will learn something which I obviously did not know while posting the answer. – Sai Mar 16 '15 at 15:36
  • @sgchecker You have 404 errors probably because your server doesn't know what to do with a WOFF file. I've had this problem multiple times. As Sai has suggested, see my answer. – Jamie Barker Mar 16 '15 at 15:44
  • @JamieBarker - OP seems to have problem loading the ttf font type as well. That kinda seems to suggest that the font file path is wrong – Sai Mar 16 '15 at 15:46
  • @Sai or they just don't exist: http://sarahmyra.com/beta2/css/ – Jamie Barker Mar 16 '15 at 15:49
  • 1
    @JamieBarker - lol you were able to access OP's server directory lol. OP needs to look into server config file a little bit more closely then – Sai Mar 16 '15 at 15:52
  • thanks all. my font files in the wrong directory! – sgchecker Mar 17 '15 at 12:52
1

More often than not with WOFF files, it's because your server isn't set up to serve them.

You may need to add the MIME type:

application/font-woff

to whichever flavour of server you are using (IIS, Apache, etc.).

For Apache as it seems you are using, you need to add this line to .htaccess file:

AddType application/font-woff            .woff
Jamie Barker
  • 8,145
  • 3
  • 29
  • 64
1

Make sure your path is correct, if you look at the console when you visit your website you can see failed requests to the font files.

It's currently targeting the /css/ directory for them when they are in the parent directory. So simply changing the CSS to the following should resolve the issue.

@font-face {
    font-family: smFont;
    src: url("../optima-regular-webfont.woff");
}
Carl Reid
  • 771
  • 11
  • 23