How to Add Fonts to a Website

Question

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?

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