How To Add Fonts To A Website

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: Abou

Solution 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");
}

Solution 2:

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

Solution 3:

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.